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

1. wx.canvasToTempFilePath({
2. x: x,
3. y: y,
4. width: w,
5. height: h,
6. destWidth: w,
7. destHeight: h,
8. canvasId: 'originalCanvas',
9. success: function (res) {
10. }
11. )}

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

1. ./
2. ├── app.js
3. ├── app.json
4. ├── app.wxss
5. ├── pages
6. │ └── index
7. │ ├── index.js
8. │ ├── index.json
9. │ ├── index.wxml
10. │ └── index.wxss
11. └── welCropper
12. ├── welCropper.js
13. ├── welCropper.wxml
14. └── welCropper.wxss

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

1. <!-- 引入组件 -->
2. <import src="/welCropper/welCropper.wxml" />
3.  
4. <!-- 调用组件 -->
5. <template is="welCropper" data="{{data:cropperData, cropperMovableItems:cropperMovableItems}}"></template>
6.  
7. <!-- 用于选择图片，传入cropper中 -->
8. <button bindtap='selectTap'>select image</button>

/pages/index/index.js

1. // 获取显示区域长宽
2. const device = wx.getSystemInfoSync()
3. const W = device.windowWidth
4. const H = device.windowHeight - 50
5.  
6. let cropper = require('../../welCropper/welCropper.js');
7.  
8. console.log(device)
9.  
10. Page({
11. data: {
12. },
13. onLoad: function () {
14. var that = this
15. // 初始化组件数据和绑定事件
16. cropper.init.apply(that, [W, H]);
17. },
18. selectTap() {
19. var that = this
20.  
21. wx.chooseImage({
22. count: 1, // 默认9
23. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
24. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
25. success(res) {
26. const tempFilePath = res.tempFilePaths[0]
27. console.log(tempFilePath)
28.  
29. // 将选取图片传入cropper，并显示cropper
30. that.showCropper(tempFilePath, (resPath) => {
31. console.log("crop callback:" + resPath)
32. wx.previewImage({
33. current: '',
34. urls: [resPath]
35. })
36.  
37. // that.hideCropper() //隐藏，我在项目里是点击完成就上传，所以如果回调是上传，那么隐藏掉就行了，不用previewImage
38. })
39. }
40. })
41. }
42. })

最后引入组件的样式  /pages/index/index.wxss

1. @import "/welCropper/welCropper.wxss";
2.