代码初始化

k94314517

2024-10-16 17efddc6a667670dca682bf36b51a43e99615e6d

 h5/pages/cropping/cropping.vue

@@ -8,10 +8,13 @@
            :style="{ width: preImgW + 'px', height: preImgH + 'px', transform: `translate(${x}px,${y}px)` }"></canvas>
      </view>
      <!-- 工具 -->
      <view class="setting-btns"><text @click="onCrop">确定</text></view>
      <view class="setting-btns">
         <!-- <text @click="onCrop">确定</text> -->
         <u-button text="确定" @click="onCrop"></u-button>
      </view>
   </view>
</template>
 

<script>
   export default {
      data() {
@@ -39,20 +42,23 @@
      computed: {},
      onLoad(option) {
         // 选择照片信息
         let data = JSON.parse(decodeURIComponent(option.item));
         const query = uni.createSelectorQuery();
         query.select('.settingHeadImage').boundingClientRect();
         query.exec(res => {
            // 设置屏幕大小
            this.screenWidth = res[0].width;
            this.screenHeight = res[0].height;
            // 设置图像基准值，图像基准值按屏幕宽度设置，两边留白各40
            this.maxH = res[0].width - 80;
            this.maxW = res[0].width - 80;
            // 设置X轴值，算式：屏幕高度的一半减去基准框高度的一半
            this.xToTop = this.screenHeight / 2 - this.maxH / 2;
            this.setImageSize(data);
         });
         let data = JSON.parse(option.item);
         console.log(data)
         this.$nextTick(() => {
            const query = uni.createSelectorQuery();
            query.select('.settingHeadImage').boundingClientRect();
            query.exec(res => {
               // 设置屏幕大小
               this.screenWidth = res[0].width;
               this.screenHeight = res[0].height;
               // 设置图像基准值，图像基准值按屏幕宽度设置，两边留白各40
               this.maxH = res[0].width - 80;
               this.maxW = res[0].width - 80;
               // 设置X轴值，算式：屏幕高度的一半减去基准框高度的一半
               this.xToTop = this.screenHeight / 2 - this.maxH / 2;
               this.setImageSize(data);
            });
         })
      },
      methods: {
         // 宽高处理
@@ -98,17 +104,19 @@
                     this.preImgW = w;
                     // 设置蒙层
                     this.setBgBox();
                     // 图像预览
                     this.previewCanvas({
                        w,
                        h,
                        path
                     });
                     setTimeout(() => {
                        // 图像预览
                        this.previewCanvas({
                           w,
                           h,
                           path
                        });
                     }, 500)
                  }
               }
            });
         },
 

         // 设置蒙层
         setBgBox() {
            const {
@@ -142,6 +150,7 @@
            h,
            path
         }) {
            console.log(path, w, h)
            const ctx = uni.createCanvasContext('mycanvas');
            ctx.drawImage(path, 0, 0, w, h);
            ctx.draw();
@@ -183,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;
@@ -222,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'
@@ -241,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;
@@ -262,18 +267,19 @@
         align-items: center;
         overflow: hidden;
         z-index: 1;
 

         .pre-i {
            // transition: all 0.1s;
         }
      }
 

      .setting-btns {
         position: fixed;
         bottom: 0;
         left: 0;
         z-index: 20;
         font-size: 14px;
         width: 100%;
         color: #ffffff;
      }
   }