最近一个微信小程序项目中需要实现一个自定义相机，并可以裁剪图片的功能。如下图效果：

如何实现？

一、绘制界面

1、使用camera组件绘制界面，cover-image 绘制蒙板，蒙板是一个png图片，裁剪框位置是透明的，其它地方半透明。

2、在用cover-view 绘制最上层的几个按钮，相册、拍照、手动输入，这几个按钮也是图片。

html 代码如下：

二、js 拍照并压缩图片

js代码如下：

开始拍照图片

压缩图片

这里会发现拍照的图片是一整张完整图片，并不是裁剪框里的图片，因此需要继续裁剪图片。实现思路就是隐藏canvas画布，把图片渲染到画布上，然后计算裁剪框大小进行裁剪。

如图：

隐藏canvas画布

三、canvas 裁剪图片

代码如下：

裁剪图片

四、拿到图片后转base64，调用后台接口进行图片识别，比如车牌识别，vin识别等

代码如下：

转base64，再调用后台接口图片识别

总结

到此，整个相机插件就实现了，虽然满足了基本需求，但还是有以下几点不足：

1、只能在微信小程序上使用。

2、蒙板是静态图片，没有扫描的动画。

3、裁剪框是固定的，不能动态设置宽度和坐标。

下一步，会继续完善插件，争取实现以上几个功能，如果您有好的方法请留言告知，谢谢！需要源码的留言，感谢关注。

参考组件：