微信小程序拉起摄像头自定义拍摄界面样式

最近接了一个需求是拍摄照片传给后端做ocr身份证识别，但是需要更改拍摄的时候页面样式

我粗略的编写了一下最后结果是这样的

一、使用camera标签，直接在里边编写样式即可

图中的绿色边框是使用canvas实现的

二、拍摄后的takePhone方法为

它会返回拍摄后的照片，但是照片是整个屏幕，并不是绿色边框内的，所以需要对返回的照片进行处理 

三、对返回的照片进行裁剪，使用canvas裁剪

注意：应该先获取设备的宽高，和画布的比例进行调整，pc上和真机测试是不一样的，最好拿真机测试。（我就是在pc上调好后真机上测试剪切后的位置直接飞了）

wx.canvasToTempFilePath文档上说在draw（）的回调中使用 但是文档又说已经不使用draw（）了，我直接懵逼！最后查询后直接使用wx.canvasToTempFilePath就可以 下图的setTimeout是需要等等图片加载到画布的原因

最后success返回的info.tempFilePath就是最终裁剪完的绿色框中的内容