小程序原生 canvas 绘制身份证区域

之前搜了好多裁切的组件都不是我想要的效果
好吧自己研究吧

const device = wx.getSystemInfoSync()
const width = device.windowWidth
const height = device.windowHeight
let canvas = wx.createCanvasContext('cropper');
 // 缩放0.8倍
 let scale = 0.8
 canvas.scale(scale, scale)
 // 原点设置到手机宽的中间
 canvas.translate(width / 2, width / 2)
 // 逆时针旋转90度
 canvas.rotate(270 * Math.PI / 180)
 // 把原点挪回左上角
 canvas.translate(-width / 2, -width / 2)
 // 画图片到canvas上
 canvas.drawImage(res.tempImagePath, 0, 0, width, height)
 canvas.draw(true, () => { // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中
 // 把当前画布指定区域的内容导出生成指定大小的图片。在 draw() 回调里调用该方法才能保证图片导出成功。
     wx.canvasToTempFilePath({ 
         canvasId: 'cropper',
         // 
         x: height * 0.14 * scale,
         y: width * (1 - 0.8 - 0.16) * scale,// 是总的宽度减去我手机宽度设置80% 再减去我边距是16%得出的y轴起点
         width: height * 0.7 * scale,  //拍照的高度我设置的是页面的70%所以*0.7再乘以我要缩放0.8
         height: width * 0.8 * scale,
         success(vas) {
             m.getImage(vas.tempFilePath) // 最终获取的图片地址 拿去上传
         }
     })// 在自定义组件下，当前组件实例的this，以操作组件内 canvas 组件
 })

最后的效果


裁剪并旋转了。不是太完美但是解决了问题。
转载请注明出处谢谢