新增 todo裁剪

miniprogram/pages/takeBill/canvas/canvas.js

@@ -1,27 +1,116 @@
 Page({
   data: {
-    src: ''
+    src: './test-photo.png',
+    cw: 0,
+    ch: 0,
   },
-  onLoad(options) {
-    let {
-      src
-    } = options
-    this.setData({
-      src
-    })
-
-
+  test() {
     wx.getImageInfo({
-      src,
+      src: this.data.src,
       success: e => {
         console.log(e)
-        let {
-          path
-        } = e
-        const ctx = wx.createCanvasContext('myCanvas')
-        ctx.drawImage(path, 0, 0, 150, 100)
-        ctx.draw()
+        let ch = e.height * 2
+        let cw = e.width * 2
+        this.setData({
+          ch,
+          cw
+        })
+        const query = wx.createSelectorQuery();
+        query.select('#myCanvas').node().exec((res) => {
+          const canvas = res[0].node;
+          const ctx = canvas.getContext('2d');
+          const img = canvas.createImage();
+          let h = ch / 2
+          let w = cw / 2
+          canvas.height = h * 0.85
+          canvas.width = w * 0.9
+          img.src = this.data.src
+          img.onload = () => {
+            ctx.drawImage(img, -w * 0.05, -h * 0.075);
+          }
+        })
       }
     })
+
+  },
+
+  async saveImg() {
+    const query = wx.createSelectorQuery();
+    const canvas = await new Promise((resolve, reject) => {
+      query.select('#myCanvas')
+        .fields({
+          node: true,
+          size: true
+        })
+        .exec(async (res) => {
+          resolve(res[0].node);
+        })
+    });
+
+    wx.canvasToTempFilePath({
+      canvas,
+      success: (res) => {
+        wx.saveImageToPhotosAlbum({
+          filePath: res.tempFilePath,
+          success: function (data) {
+            wx.showToast({
+              title: '已保存到相册',
+              icon: 'success',
+              duration: 2000
+            })
+          },
+          fail: function (err) {
+            if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
+              wx.showModal({
+                title: '提示',
+                content: '需要您授权保存相册',
+                showCancel: false,
+                success: modalSuccess => {
+                  wx.openSetting({
+                    success(settingdata) {
+                      if (settingdata.authSetting['scope.writePhotosAlbum']) {
+                        // wx.showModal({
+                        //   title: '提示',
+                        //   content: '获取权限成功,再次点击图片即可保存',
+                        //   showCancel: false,
+                        // })
+                      } else {
+                        wx.showModal({
+                          title: '提示',
+                          content: '获取权限失败',
+                          showCancel: false,
+                        })
+                      }
+                    },
+                    fail(failData) {
+                      console.log("failData", failData)
+                    },
+                    complete(finishData) {
+                      console.log("finishData", finishData)
+                    }
+                  })
+                }
+              })
+            } else {
+              wx.showToast({
+                title: '请保存图片',
+                icon: 'none',
+                duration: 2000
+              })
+            }
+          },
+        })
+      },
+      fail(res) {
+        console.log('fail');
+      }
+    }, this)
+  },
+
+  onLoad(options) {
+    this.setData({
+      src: options.src
+    })
+    this.test()
   }
 })

miniprogram/pages/takeBill/canvas/canvas.wxml

@@ -1,2 +1,4 @@
-<image src="{{src}}"></image>
-<canvas type="2d" id="myCanvas" style="border:1px solid red"></canvas>
+<image id="myimage" src="{{src}}" style="width:{{cw}}rpx;height: {{ch}}rpx;"></image>
+<view style="box-sizing: border-box;border: 1rpx solid green;width:{{cw * 0.9}}rpx;;height: {{ch * 0.85}}rpx;position: absolute;top: {{0.05 *0.5* ch}}rpx;left: {{0.075 *0.5* cw}}rpx;"></view>
+<canvas type="2d" id="myCanvas" style="position:fixed;top: -1150rpx;width:{{cw*0.9}}rpx;height: {{ch*0.85}}rpx;box-sizing: border-box"></canvas>
+<button bindtap="saveImg">saveImg</button>

miniprogram/pages/takeBill/takeBill.wxml

@@ -1,4 +1,4 @@
-<camera style="height: 100vh;"></camera>
+<camera style="height: 100vh;width: 100vw;"></camera>
 <view class="top back fixed"></view>
 <view class="right back fixed"></view>
 <view class="bottom back fixed"></view>
@@ -8,4 +8,5 @@
 <view class="out fixed" bindtap="test">
   <view class="in"></view>
 </view>
-<view class="go-back fixed" bindtap="goBack">返 回</view>
+<view class="go-back fixed" bindtap="goBack">返 回</view>
+<canvas></canvas>

project.private.config.json

@@ -1,36 +1,17 @@
 {
-  "setting": {
-    "urlCheck": true,
-    "es6": true,
-    "enhance": true,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "coverView": true,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": false,
-    "lazyloadPlaceholderEnable": false,
-    "useMultiFrameRuntime": false,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
-    },
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true,
-    "disableUseStrict": false,
-    "showES6CompileOption": false,
-    "useCompilerPlugins": false,
-    "ignoreUploadUnusedFiles": true,
-    "useStaticServer": true,
-    "minifyWXML": true
-  },
   "condition": {
+    "plugin": {
+      "current": -1,
+      "list": []
+    },
+    "game": {
+      "current": -1,
+      "list": []
+    },
+    "gamePlugin": {
+      "current": -1,
+      "list": []
+    },
     "miniprogram": {
       "list": [
         {
@@ -80,11 +61,49 @@
           "name": "",
           "pathName": "pages/takeBill/takeBill",
           "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/takeBill/canvas/canvas",
+          "query": "",
           "scene": null,
           "launchMode": "default"
         }
       ]
     }
   },
+  "setting": {
+    "urlCheck": false,
+    "es6": true,
+    "enhance": true,
+    "postcss": true,
+    "preloadBackgroundData": false,
+    "minified": true,
+    "coverView": true,
+    "autoAudits": false,
+    "showShadowRootInWxmlPanel": true,
+    "uglifyFileName": false,
+    "checkInvalidKey": true,
+    "uploadWithSourceMap": true,
+    "compileHotReLoad": false,
+    "lazyloadPlaceholderEnable": false,
+    "useMultiFrameRuntime": false,
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "packNpmManually": false,
+    "packNpmRelationList": [],
+    "minifyWXSS": true,
+    "disableUseStrict": false,
+    "showES6CompileOption": false,
+    "useCompilerPlugins": false,
+    "ignoreUploadUnusedFiles": true,
+    "useStaticServer": true,
+    "minifyWXML": true
+  },
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html"
 }