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

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

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

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

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

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

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

/pages/index/index.wxml

/pages/index/index.js

最后引入组件的样式

/pages/index/index.wxss

微信小程序裁剪组件，支持前端裁剪和后端裁剪两种方式

1.前端裁剪：将裁剪框指定的区域，单独生成图片，获取裁剪图片的临时文件路径

2.后端裁剪：获取裁剪框相对于原图的像素坐标位置，将裁剪区域坐标以及原图卖宏临时文件路径，传到后端进行图片裁剪

https://gitee.com/gnliscream/image-cropper

使用微信小程序自定义组件开发

小程序自定义组件官网： https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

添加image-cropper标漏梁签，如下

可以在image-cropper标签内添加 *** 作按钮，如下

首先需要在onLoad方法中，设置裁剪标签属性

然后添加按钮相应的绑定方法

获取到的res如下

获取到的裁剪参数的中搜册对应关系图

获取到裁剪参数后，将原图以及裁剪参数传到后台进行裁剪

2.获取裁剪图片地址

获取到的res如下

---