mrshi

MrShi

2024-02-28 f5aab724124ffde943e208d69811b8b7bf6fa14c

 h5/pages/cropping/cropping.vue

@@ -8,7 +8,10 @@
            :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>
 
@@ -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: {
         // 宽高处理
@@ -274,6 +280,7 @@
         left: 0;
         z-index: 20;
         font-size: 14px;
         width: 100%;
         color: #ffffff;
      }
   }