微信小程序：截图组件welCropper，实现原理及其使用

最近做项目的时候，需要做一个截图功能。用了一个别人写的截图工具，发现截出的 图质量下降了 ，但是我们图片要用来做识别, 需要保证截出的图质量不下降。而且也不支持通过拖动来调整截图框的大小。所以这个截图工具无法满足需求。因为所以，就自己动手写了一个截图组件。

下面介带告绍一下实现原理和使用方法。

组件 wxml 的层次结烂氏构图如下：

最后截图，通过四个点的位置计算出截图框的位置，然后放大对应原蠢历明图大小的位置，得到在原图中的 (x, y, width, height) ，最后通过官方提供的 canvas 接口截图。

假设我们的应用文件结构如下：

调用组件时，需要传入 cropperData 、 cropperMovableItems 、 cropperChangableData ，因为数据和事件都是绑定在 Page 上的，所以要避免使用组件里面已经被占用的命名。

/pages/index/index.wxml

/pages/index/index.js

最后引入组件的样式

/pages/index/index.wxss

cropper组和槐团件唤橘明岩

cropper.js

cropper.json

cropper.wxml

cropper.wxcc

index.js

index.json

index.wxml

index.wxss

log.js

log.json

log.wxml

log.wxss

app.json

---