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

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

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

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

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

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

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

/pages/index/index.wxml

/pages/index/index.js

最后引入组件的样式

/pages/index/index.wxss

同时按住Home键+电源键。

下拉屏幕顶帘菜单-向左滑动快捷图标-点击【截取屏幕】快捷图标也可。手势截屏也行

腾行樱罩讯微信是一种更快速的档闹短邮，具有零资费、跨平台沟通、显示实时输入状颂毕态等功能，与传统的短信沟通方式相比，更灵活、智能，且节省资费。

目前市面上有许多小程序可以用来截图身份z，例如「芝麻OCR」、「身份z拍照识别」、「身指笑份证拍照解析」、「实名认证」等。这些小程序都支持手机安装，可以方便的快捷的 *** 作，可以使用其中的功能拍照截取身份梁橡证照片，并上传至服务器进行唯渣含解析。

---