效果图
设计思路
设计一个遮罩层图片，打开摄像头，拍照，把照片放进画布上，根据遮罩层的尺寸进行裁剪，得出处理后的图片。
wxml文件
把遮罩层放进去，并加上按钮和点击事件
<camera wx:if="{{isShowCamera}}" flash="off" style="height:100vh;"><cover-view class='camerabgImage-view'><cover-image wx:if="{{showPhoto}}" class='bgImage' src='{{image}}'> </cover-image><!-- 遮罩层照片 --><cover-image class='bgImage1' src='../icons/zhezhao.png'></cover-image><cover-view class='cameratop-view1'>中华人民共和国居民身份证</cover-view><cover-view class='cameratop-view2'>（正面）</cover-view><cover-view class='cameracenter-view' style='top:62%'>请对准四个角拍照</cover-view><!-- 拍照按钮 --><cover-view class='camerabotton-view' style='bottom:0px'><cover-image class='cancelphoto'src='{{show == true ? "../icons/close.png" : "../icons/return.png" }}'bindtap='cancelPhotoAction'></cover-image><cover-image class='takephoto'src='{{show == true ? "../icons/paizhao.png" : "../icons/sure.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:{{phoneWidth*2}}rpx;height:{{phoneHeight*2}}rpx;'></canvas>
js文件
先获取摄像头权限，并打开摄像头
data: {isShowCamera: false,width: 300,height: 190,src: "",image: "",skipphotoStatus: "0", // 1跳过 0没有跳过isShowImage: false,url: "",phoneWeight: "",phoneHeight: "",image:"/icons/zhezhao.png",show:true,showPhoto:false,imgUrlZ:"",imgUrlF:"",chooseID:""},//获取摄像头权限并打开onShow: function() {wx.authorize({scope: 'scope.camera',success: function(res) {this.setData({isShowCamera: true,})},fail: function(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})this.setData({isShowCamera: true,})} else {//不允许wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})} else {//取消wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}})},
点击拍照事件
//点击拍照 takePhotoAction: function() {if (this.data.show == true){this.ctx.takePhoto({quality: 'high', //高质量success: (res) => {this.loadTempImagePath(res.tempImagePath);this.setData({image: res.tempImagePath,showPhoto: true})},})}else{//根据拍证件照是反面还是正面进行判断if (this.data.chooseID == 1){//正面let imgUrl = {id: this.data.chooseID, src: this.data.imgUrlZ}wx.redirectTo({url: '../idcard/idcard?imgUrl=' + JSON.stringify(imgUrl),})}else{//反面let imgUrl = {id: this.data.chooseID, src: this.data.imgUrlF }wx.redirectTo({url: '../idcard/idcard?imgUrl=' + JSON.stringify(imgUrl),})}}},
处理图像
//处理图像loadTempImagePath(src) {wx.getSystemInfo({success: (res) => {// 矩形的位置var res = wx.getSystemInfoSync()this.setData({phoneWidth: res.screenWidth,phoneHeight: res.screenHeight})//根据遮罩层的尺寸设配机型进行定位x,y轴，进行裁剪var imageX = 0.1 * this.data.phoneWidth;var imageY = 0.25 * this.data.phoneHeight;var imageWidth = 0.8 * this.data.phoneWidth;var imageHeight =0.25 * this.data.phoneHeight;wx.getImageInfo({src,success: (res) => {this.setData({isShowImage: true,})const canvas = wx.createCanvasContext("image-canvas", this)//过渡页面中，图片的路径坐标和大小canvas.drawImage(src, 0, 0, this.data.phoneWidth, this.data.phoneHeight)wx.showLoading({title: '数据处理中...',icon: 'loading',duration: 10000})canvas.draw(false,setTimeout(() => {wx.canvasToTempFilePath({//裁剪对参数canvasId: "image-canvas",x: imageX, //画布x轴起点y: imageY, //画布y轴起点width: imageWidth, //画布宽度height: imageHeight, //画布高度destWidth: imageWidth, //输出图片宽度destHeight: imageHeight, //输出图片高度success: (res) => {wx.hideLoading()this.setData({isShowImage: false,show: false,})//根据正反面，赋值if (this.data.chooseID == 1) {this.data.imgUrlZ = res.tempFilePath} else {this.data.imgUrlF = res.tempFilePath}},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))}})}})},
点击拍照的时候直接跳转此页面就可以拍照处理图片并且自定义裁剪。
