jiangping
2024-02-28 300d75d257dbe60401dfb97123ae39e32f37380e
h5/pages/cropping/cropping.vue
@@ -14,7 +14,7 @@
      </view>
   </view>
</template>
<script>
   export default {
      data() {
@@ -104,17 +104,19 @@
                     this.preImgW = w;
                     // 设置蒙层
                     this.setBgBox();
                     // 图像预览
                     this.previewCanvas({
                        w,
                        h,
                        path
                     });
                     setTimeout(() => {
                        // 图像预览
                        this.previewCanvas({
                           w,
                           h,
                           path
                        });
                     }, 500)
                  }
               }
            });
         },
         // 设置蒙层
         setBgBox() {
            const {
@@ -148,6 +150,7 @@
            h,
            path
         }) {
            console.log(path, w, h)
            const ctx = uni.createCanvasContext('mycanvas');
            ctx.drawImage(path, 0, 0, w, h);
            ctx.draw();
@@ -189,7 +192,7 @@
               let y = (res[0].height - res[0].width) / 2;
               /**
                * 判断照片可移动的距离是否大于留白的值,如果大于向右划时图片的宽减去基准框的宽减去留白向左时留白,小于时按图片的可移动值
                * */
                * */
               let x = (preImgW - maxW) / 2 > 40 ? (fx < 0 ? preImgW - maxW - 40 : 40) : (preImgW - maxW) / 2;
               if (preImgH > maxH) {
                  this.y = this.y > y ? y : this.y < -y ? -y : this.y;
@@ -228,14 +231,10 @@
                  destHeight: maxH,
                  canvasId: 'mycanvas',
                  success: fileRes => {
                     console.log(fileRes);
                     uni.previewImage({
                        count: 1,
                        urls: [fileRes.tempFilePath]
                     });
                     uni.$emit('update', fileRes)
                     uni.navigateBack({ delta: 1 });
                  },
                  fail: function(err) {
                     console.log(err);
                     uni.showToast({
                        title: '上传失败:图片生成过程中遇到错误',
                        icon: 'none'
@@ -247,19 +246,19 @@
      }
   };
</script>
<style lang="scss" scoped>
   .settingHeadImage {
      background-color: #000000;
      overflow: hidden;
      .pre-canvas {
         position: fixed;
         top: 0;
         left: 0;
         z-index: 20;
      }
      .preImage {
         min-width: 100vw;
         height: 100vh;
@@ -268,12 +267,12 @@
         align-items: center;
         overflow: hidden;
         z-index: 1;
         .pre-i {
            // transition: all 0.1s;
         }
      }
      .setting-btns {
         position: fixed;
         bottom: 0;