微信小程序使用相机
发布:2018-07-27 11:56浏览:
次来源:网络 作者:cola
-
<view class="page-body">
-
<view class="page-body-wrapper">
-
<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
-
<view class="btn-area">
-
<button type="primary" bindtap="takePhoto">拍照</button>
-
</view>
-
<view class="btn-area">
-
<button type="primary" bindtap="startRecord">开始录像</button>
-
</view>
-
<view class="btn-area">
-
<button type="primary" bindtap="stopRecord">结束录像</button>
-
</view>
-
<view class="preview-tips">预览</view>
-
<image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image>
-
<video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
-
</view>
-
</view>
-
onLoad() {
-
this.ctx = wx.createCameraContext()
-
},
-
takePhoto() {
-
this.ctx.takePhoto({
-
quality: 'high',
-
success: (res) => {
-
this.setData({
-
src: res.tempImagePath
-
})
-
}
-
})
-
},
-
startRecord() {
-
this.ctx.startRecord({
-
success: (res) => {
-
console.log('startRecord')
-
}
-
})
-
},
-
stopRecord() {
-
this.ctx.stopRecord({
-
success: (res) => {
-
this.setData({
-
src: res.tempThumbPath,
-
videoSrc: res.tempVideoPath
-
})
-
}
-
})
-
},
-
error(e) {
-
console.log(e.detail)
-
}
-
/* pages/one/one.wxss */
-
.preview-tips {
-
margin: 20rpx 0;
-
}
-
-
.video {
-
margin: 50px auto;
-
width: 100%;
-
height: 300px;
-
}
|
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。