更新 拍摄裁剪

miniprogram/pages/takeBill/canvas/canvas.js

@@ -26,7 +26,7 @@ Page({
           canvas.width = w * 0.9
           img.src = this.data.src
           img.onload = () => {
-            ctx.drawImage(img, -w * 0.05, -h * 0.075);
+            ctx.drawImage(img, -w * 0.05, -h * 0.05);
           }
         })
       }

miniprogram/pages/takeBill/takeBill.js

@@ -11,7 +11,9 @@ Page({
     shipName: "",
     shipMmsi: "",
     authModal: false,
-    modalText: "位置"
+    modalText: "位置",
+    cw: '',
+    ch: ''
   },
   test() {
     const ctx = wx.createCameraContext()
@@ -19,93 +21,71 @@ Page({
       quality: 'high',
       success: (res) => {
         let src = res.tempImagePath
-        wx.navigateTo({
-          url: `/pages/takeBill/canvas/canvas?src=${src}`,
+        wx.getImageInfo({
+          src,
+          success: e => {
+            console.log(e)
+            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 = src
+              img.onload = () => {
+                ctx.drawImage(img, -w * 0.05, -h * 0.05);
+              }
+              this.saveImg()
+            })
+          }
         })
-        // wx.getImageInfo({
-        //   src,
-        //   success: e => {
-        //     console.log(e)
-        //   }
-        // })
-
 
       }
     })
   },
   goBack() {
-    // wx.redirectTo({
-    //   url: '/pages/takePhoto/takePhoto',
-    // })
-    wx.navigateBack()
+    wx.redirectTo({
+      url: '/pages/takePhoto/takePhoto',
+    })
   },
-  takePhotoAction: function () {
-    const ctx = wx.createCameraContext()
-    ctx.takePhoto({
-      quality: 'high',
-      success: (res) => {
-        console.log(res)
-        let src = res.tempImagePath
-        wx.compressImage({
-          src,
-          quality: 80, // 压缩质量
-          success: async e => {
-            console.log("图片压缩成功!", e)
-            wx.hideLoading({
-              success: (res) => {},
-            })
-            if (wx.getStorageSync('userName')) {
-              wx.showLoading({
-                title: '正在上传...',
-              })
-              let postData = {
-                type: 0,
-                userId: wx.getStorageSync('userId'),
-              }
-
-              postData.location = ''
-              let res = await uploadFile(e.tempFilePath, postData)
-              console.log("上传结束", res)
-              if (res.status == 0) {
-                wx.showToast({
-                  title: res.msg
-                })
-                wx.setStorageSync('shareImageUrl', res.result.viewUrl)
-                console.log(wx.getStorageSync('shareImageUrl'))
-                wx.downloadFile({
-                  url: res.result.viewUrl,
-                  success: e => {
-                    console.log("下载调用!", e)
-                    wx.setStorageSync('cacheImage', e.tempFilePath)
-                    wx.redirectTo({
-                      url: '/pages/takeBill/success/success',
-                    })
-                  },
-                  fail: e => {
-                    console.log("失败3", e)
-                  }
-                })
-
+  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);
+        })
+    });
 
-              } else {
-                wx.showToast({
-                  title: res.msg
-                })
-              }
-            } else {
-              // 新用户图片
-              console.log("新用户图片", e)
-              wx.setStorageSync('type', 1)
-              wx.setStorageSync('file', e.tempFilePath)
-              wx.redirectTo({
-                url: `/pages/newCachePage/newCachePage`,
-              })
-            }
-          },
-          fail: e => {
-            console.log("失败2", e)
-          }
+    wx.canvasToTempFilePath({
+      canvas,
+      success: async e => {
+        let res = await uploadFile(e.tempFilePath, {
+          type: 0,
+          // userId: wx.getStorageSync('userId'),
+          userId: 89,
+          location: ''
+        })
+        wx.showToast({
+          title: res.msg,
         })
+        this.goBack()
+      },
+      fail(res) {
+        console.log('fail');
       }
     })
   },

miniprogram/pages/takeBill/takeBill.json

@@ -1,4 +1,3 @@
 {
-  "usingComponents": {},
-  "pageOrientation": "auto"
+  "usingComponents": {}
 }

miniprogram/pages/takeBill/takeBill.wxml

@@ -1,4 +1,4 @@
-<camera style="height: 100vh;width: 100vw;"></camera>
+<camera resolution="high" style="height: 100vh;width: 100vw;"></camera>
 <view class="top back fixed"></view>
 <view class="right back fixed"></view>
 <view class="bottom back fixed"></view>
@@ -9,4 +9,4 @@
   <view class="in"></view>
 </view>
 <view class="go-back fixed" bindtap="goBack">返 回</view>
-<canvas></canvas>
+<canvas type="2d" id="myCanvas" style="position:fixed;left: -100vw;width:{{cw*0.9*0.25}}rpx;height: {{ch*0.85*0.25}}rpx;box-sizing: border-box"></canvas>

miniprogram/pages/takePhoto/takePhoto.js

@@ -41,7 +41,7 @@ Page({
     })
   },
   takeBill() {
-    wx.navigateTo({
+    wx.redirectTo({
       url: '/pages/takeBill/takeBill',
     })
   },