最近写识别行驶证功能，点击拍照把指定区域截取，生成图片功能。
系统相机。该组件是原生组件，使用时请注意相关限制。 扫码二维码功能，需升级微信客户端至6.7.3。
微信小程序Camera相机地址
我们看下效果：
1、首先生成一个CanvasContext：
/*** 生命周期函数--监听页面加载*/onLoad: function(options) {requireJs.adaptionIphoneX(this);this.ctx = wx.createCameraContext()},
2、相机的 wxml样式
<camera wx:if='{{isShowCamera}}' device - position="width" flash="off" style="width:{{windowWidth}}px; height:{{windowHeight}}px;"><cover-view class='camerabgImage-view'><cover-image class='bgImage' src='{{isIphoneX==true?"../../myImage/vehicle/biankuang_x.png":"../../myImage/vehicle/biankuang.png"}}'> </cover-image><cover-view class='cameratop-view1'>中华人民共和国机动车行驶证</cover-view><cover-view class='cameratop-view2'>（行驶证主页）</cover-view><cover-view class='cameracenter-view' style='top:{{isIphoneX==true?"52%":"62%"}}'>请对准左下角发证机关印章</cover-view><!-- 拍照按钮 --> <cover-view class='camerabotton-view' style='bottom:{{isIphoneX==true?"75px":"0px"}}'><cover-image class='cancelphoto' src='../../myImage/vehicle/quxiao.png' bindtap='cancelPhotoAction'></cover-image><cover-image class='takephoto' src='../../myImage/vehicle/paizhao.png' bindtap='takePhotoAction'></cover-image><cover-view class='skipphoto' bindtap='skipphotoAction'>{{skipphotoStatus==1?"跳过":""}}</cover-view></cover-view></cover-view></camera><canvas wx:if='{{isShowImage}}' canvas-id="image-canvas" style='width:{{windowWidth}}px; height:{{windowHeight}}px;'></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 = thiswx.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 = thisthat.ctx.takePhoto({quality: 'high', //高质量success: (res) => {this.loadTempImagePath(res.tempImagePath);},})},
7、针对原图片截取尺寸 与 截取后的图片
loadTempImagePath: function(options) {var that = thisthat.path = optionswx.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) {}
