最近写识别行驶证功能，点击拍照把指定区域截取，生成图片功能。
系统相机。该组件是原生组件，使用时请注意相关限制。 扫码二维码功能，需升级微信客户端至6.7.3。
我们看下效果：
1、首先生成一个CanvasContext：
/** * 生命周期函数--监听页面加载 */ onLoad: function(options) { requireJs.adaptionIphoneX(this); this.ctx = wx.createCameraContext() },
2、相机的 wxml样式
<camera wx:if='{{isShowCamera}}' device - position="width" flash="off"> <cover-view> <cover-image src='{{isIphoneX==true?"../../myImage/vehicle/biankuang_x.png":"../../myImage/vehicle/biankuang.png"}}'> </cover-image> <cover-view>中华人民共和国机动车行驶证</cover-view> <cover-view>（行驶证主页）</cover-view> <cover-view>请对准左下角发证机关印章</cover-view> <!-- 拍照按钮 --> <cover-view> <cover-image src='' bindtap='cancelPhotoAction'></cover-image> <cover-image src='' bindtap='takePhotoAction'></cover-image> <cover-view bindtap='skipphotoAction'>{{skipphotoStatus==1?"跳过":""}} </cover-view> </cover-view> </cover-view> </camera> <canvas wx:if='{{isShowImage}}' canvas-id="image-canvas"></canvas>
3、相机的 wxss样式
.camerabgImage-view{ height: 100%; width: 100%; position:absolute; } .bgImage{ width: 100%; height: 100%; position: absolute; } .cameratop-view1{ margin-top: 174rpx; } .cameratop-view2{ margin-top: 220rpx; } .cameratop-view1, .cameratop-view2{ width: 100%; display: flex; justify-content: center; position: absolute; font-family: PingFangSC-Medium; font-size: 36rpx; color: #FFFFFF; letter-spacing: 0; text-align: center; } .cameracenter-view{ height: 44rpx; width: 100%; position: absolute; font-family: PingFangSC-Medium; font-size: 32rpx; color: #FFFFFF; letter-spacing: 0; text-align: center; } /* 底部 */ .camerabotton-view{ height: 200rpx; width: 100%; position:absolute; display: flex; justify-content: space-around; align-items: center; } .cancelphoto{ width: 50rpx; height: 50rpx; } .takephoto{ width: 132rpx; height: 132rpx; } .skipphoto{ font-family: PingFangSC-Regular; font-size: 32rpx; color: #FFFFFF; letter-spacing: 0; text-align: center; }
4、js 中访问原生组件 camera 主要针对相机权限处理
onShow: function() { var that = this wx.authorize({ scope: 'scope.camera', success: function (res) { that.setData({ isShowCamera: true, }) }, fail: function (res) { console.log("" + res); wx.showModal({ title: '请求授权您的摄像头', content: '如需正常使用此小程序功能，请您按确定并在设置页面授权用户信息', confirmText: '确定', success: res => { if (res.confirm) { wx.openSetting({ success: function (res) { console.log('成功'); console.log(res); if (res.authSetting['scope.camera']) { //设置允许获取摄像头 console.log('设置允许获取摄像头') wx.showToast({ title: '授权成功', icon: 'success', duration: 1000 }) that.setData({ isShowCamera: true, }) } else { //不允许 wx.showToast({ title: '授权失败', icon: 'none', duration: 1000 }) wx.redirectTo({ url: 'addCarInfo/addCarInfo', }) } } }) } else { //取消 wx.showToast({ title: '授权失败', icon: 'none', duration: 1000 }) wx.redirectTo({ url: 'addCarInfo/addCarInfo', }) } } }) } }) },
5、页面初始化数据
/** * 页面的初始数据 */ data: { isShowCamera: false, width: 10, height: 10, src: "", image: "", skipphotoStatus: "0",// 1跳过 0没有跳过 isShowImage: false },
6、点击拍照 设置照片， 返回拍照图片
/** * 拍照 */ takePhotoAction: function() { var that = this that.ctx.takePhoto({ quality: 'high', //高质量 success: (res) => { this.loadTempImagePath(res.tempImagePath); }, }) },
7、针对原图片截取尺寸 与 截取后的图片
loadTempImagePath: function(options) { var that = this that.path = options wx.getSystemInfo({ success: function(res) { // 矩形的位置 var image_x = 15; var image_y = 150; var image_width = that.data.width - 2 * 15; var image_height = 238; wx.getImageInfo({ src: that.path, success: function(res) { that.setData({ isShowImage: true, }) that.canvas = wx.createCanvasContext("image-canvas", that) //过渡页面中，图片的路径坐标和大小 that.canvas.drawImage(that.path, 0, 0, that.data.width, that.data.height) wx.showLoading({ title: '数据处理中...', icon: 'loading', duration: 10000 }) // 这里有一些很神奇的操作,总结就是MD拍出来的照片规格居然不是统一的过渡页面中，对裁剪框的设定 that.canvas.setStrokeStyle('black') that.canvas.strokeRect(image_x, image_y, image_width, image_height) that.canvas.draw() setTimeout(function() { wx.canvasToTempFilePath({ //裁剪对参数 canvasId: "image-canvas", x: image_x, //画布x轴起点 y: image_y, //画布y轴起点 width: image_width, //画布宽度 height: image_height, //画布高度 destWidth: image_width, //输出图片宽度 destHeight: image_height, //输出图片高度 success: function(res) { that.setData({ image: res.tempFilePath, }) //清除画布上在该矩形区域内的内容。 // that.canvas.clearRect(0, 0, that.data.width, that.data.height) // that.canvas.drawImage(res.tempFilePath, image_x, image_y, image_width, image_height) // that.canvas.draw() wx.hideLoading() console.log(res.tempFilePath); //在此可进行网络请求 PublicJS.drivinglicenseUpload(res.tempFilePath, that.uploadFile); }, fail: function(e) { wx.hideLoading() wx.showToast({ title: '出错啦...', icon: 'loading' }) if (this.data.skipphotoStatus == 1) { wx.redirectTo({ url: 'addCarInfo/addCarInfo', }) } else { wx.navigateBack({ delta: 1 }); } } }); }, 1000); } }) } }) }, // 接口返回结果 uploadFile: function(data) {}
1.canvas组件是由客户端创建的原生组件，它的层级是最高的。
2.请勿在scroll-view中使用canvas组件。
3.css动画对canvas组件无效。