最后截圖，通過四個點的位置計算出截圖框的位置，然后放大對應(yīng)原圖大小的位置，得到在原圖中的(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. )}

假設(shè)我們的應(yīng)用文件結(jié)構(gòu)如下：

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

調(diào)用組件時，需要傳入cropperData和cropperMovableItems，因為數(shù)據(jù)和事件都是綁定在Page上的，所以要避免使用組件里面已經(jīng)被占用的命名。  /pages/index/index.wxml

1. <!-- 引入組件 -->
2. <import src="/welCropper/welCropper.wxml" />
3.  
4. <!-- 調(diào)用組件 -->
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. // 獲取顯示區(qū)域長寬
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. // 初始化組件數(shù)據(jù)和綁定事件
16. cropper.init.apply(that, [W, H]);
17. },
18. selectTap() {
19. var that = this
20.  
21. wx.chooseImage({
22. count: 1, // 默認(rèn)9
23. sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
24. sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認(rèn)二者都有
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() //隱藏，我在項目里是點擊完成就上傳，所以如果回調(diào)是上傳，那么隱藏掉就行了，不用previewImage
38. })
39. }
40. })
41. }
42. })

最后引入組件的樣式  /pages/index/index.wxss

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