todo canvas裁剪

miniprogram/app.json

@@ -7,7 +7,8 @@
     "pages/share/share",
     "pages/newCachePage/newCachePage",
     "pages/takeBill/takeBill",
-    "pages/takeBill/success/success"
+    "pages/takeBill/success/success",
+    "pages/takeBill/canvas/canvas"
   ],
   "window": {
     "backgroundColor": "#F6F6F6",

miniprogram/pages/takeBill/canvas/canvas.js

@@ -0,0 +1,27 @@
+Page({
+  data: {
+    src: ''
+  },
+  onLoad(options) {
+    let {
+      src
+    } = options
+    this.setData({
+      src
+    })
+
+
+    wx.getImageInfo({
+      src,
+      success: e => {
+        console.log(e)
+        let {
+          path
+        } = e
+        const ctx = wx.createCanvasContext('myCanvas')
+        ctx.drawImage(path, 0, 0, 150, 100)
+        ctx.draw()
+      }
+    })
+  }
+})

miniprogram/pages/takeBill/canvas/canvas.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

miniprogram/pages/takeBill/canvas/canvas.wxml

@@ -0,0 +1,2 @@
+<image src="{{src}}"></image>
+<canvas type="2d" id="myCanvas" style="border:1px solid red"></canvas>

miniprogram/pages/takeBill/canvas/canvas.wxss

@@ -0,0 +1 @@
+/* pages/takeBill/canvas/canvas.wxss */

miniprogram/pages/takeBill/takeBill.js

@@ -13,7 +13,32 @@ Page({
     authModal: false,
     modalText: "位置"
   },
+  test() {
+    const ctx = wx.createCameraContext()
+    ctx.takePhoto({
+      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)
+        //   }
+        // })
 
+
+      }
+    })
+  },
+  goBack() {
+    // wx.redirectTo({
+    //   url: '/pages/takePhoto/takePhoto',
+    // })
+    wx.navigateBack()
+  },
   takePhotoAction: function () {
     const ctx = wx.createCameraContext()
     ctx.takePhoto({
@@ -84,6 +109,7 @@ Page({
       }
     })
   },
+
   onLoad() {
     let userName = wx.getStorageSync('userName')
     let userId = wx.getStorageSync('userId')

miniprogram/pages/takeBill/takeBill.json

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

miniprogram/pages/takeBill/takeBill.wxml

@@ -1,7 +1,11 @@
-<view style="background: #000;height: 30vh;"></view>
-<camera style="height: 30vh;"></camera>
-<view style="background: #000;height: 40vh;display:flex;justify-content: center;align-items: center;">
-  <view bindtap="takePhotoAction" style="border: 4rpx solid #fff;border-radius: 50%;padding: 5px;">
-    <view style="height:10vh;width:10vh;border-radius: 50%;background: #fff;margin:0 auto;"></view>
-  </view>
-</view>
+<camera style="height: 100vh;"></camera>
+<view class="top back fixed"></view>
+<view class="right back fixed"></view>
+<view class="bottom back fixed"></view>
+<view class="left back fixed"></view>
+<view class="dashed fixed"></view>
+<view class="text fixed">请 将 磅 单 置 于 拍 摄 框 内</view>
+<view class="out fixed" bindtap="test">
+  <view class="in"></view>
+</view>
+<view class="go-back fixed" bindtap="goBack">返 回</view>

miniprogram/pages/takeBill/takeBill.wxss

@@ -1 +1,93 @@
-/* pages/takeBill/takeBill.wxss */
+/* pages/takeBill/takeBill.wxss */
+page {
+  /* 拍摄框宽度 */
+  --w: 90vw;
+
+  /* 拍摄框高度 */
+  --h: 85vh;
+
+  /* 拍摄框上边距 */
+  --tg: 5vh
+}
+
+.back {
+  background: #000;
+  opacity: 0.5;
+}
+
+.fixed {
+  position: fixed;
+}
+
+
+.top {
+  top: 0;
+  width: 100vw;
+  height: var(--tg);
+}
+
+.right {
+  right: 0;
+  height: var(--h);
+  width: calc((100vw - var(--w)) / 2);
+  top: var(--tg);
+}
+
+.bottom {
+  bottom: 0;
+  width: 100vw;
+  height: calc(100vh - var(--tg) - var(--h));
+}
+
+.left {
+  left: 0;
+  height: var(--h);
+  width: calc((100vw - var(--w)) / 2);
+  top: var(--tg);
+}
+
+.dashed {
+  height: var(--h);
+  width: var(--w);
+  top: var(--tg);
+  left: calc((100vw - var(--w)) / 2);
+  border: 4rpx dashed grey;
+}
+
+.text {
+  top: 22vh;
+  transform: rotate(90deg);
+  transform-origin: left;
+  left: 52vw;
+  color: #fff;
+  opacity: 0.7;
+  font-size: 4vh;
+  white-space: nowrap;
+}
+
+.out {
+  height: calc((100vh - var(--tg) - var(--h)) / 2);
+  width: calc((100vh - var(--tg) - var(--h)) / 2);
+  border: 4rpx solid #fff;
+  bottom: calc((100vh - var(--tg) - var(--h)) / 4);
+  left: calc(50vw - (100vh - var(--tg) - var(--h)) / 4);
+  border-radius: 50%;
+  padding: 2rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.in {
+  width: 90%;
+  height: 90%;
+  background: #fff;
+  border-radius: 50%;
+}
+
+.go-back {
+  font-size: 2vh;
+  color: #fff;
+  bottom: calc((100vh - var(--tg) - var(--h)) / 3);
+  right: calc((100vh - var(--tg) - var(--h)) / 2);
+}

miniprogram/pages/takePhoto/takePhoto.wxml

@@ -4,12 +4,12 @@
 </view>
 <view wx:if="{{userId&&shipId}}" class="new-camera camera-cargo">
   <image class="icon" bindtap="takePhoto" data-mediatype="{{3}}" src="{{newCameraIcon}}"></image>
-  <view>拍货物</view>
+  <view bindtap="takePhoto" data-mediatype="{{3}}">拍货物</view>
 
 </view>
 <view wx:if="{{userId&&shipId}}" class="new-camera camera-bill">
   <image class="icon" data-mediatype="{{0}}" bindtap="takeBill" src="{{newCameraIcon}}"></image>
-  <view> 拍单据
+  <view data-mediatype="{{0}}" bindtap="takeBill"> 拍单据
   </view>
 </view>
 <image wx:else class="camera-icon" bindtap="takePhoto" data-mediatype="{{3}}" src="{{cameraIcon}}"></image>