@10yun/cv-mobile-ui 0.5.62 → 0.5.63

package/ui-fireui/components/u-image-cropper/u-image-cropper.vue

@@ -0,0 +1,1144 @@
+<template>
+  <view class="up-container" @touchmove.stop.prevent="stop">
+    <view class="up-image-cropper" @touchend="cutTouchEnd" @touchstart="cutTouchStart" @touchmove="cutTouchMove">
+      <view class="up-content">
+        <view
+          class="up-content-top up-bg-transparent"
+          :style="{ height: cutY + 'px', transitionProperty: cutAnimation ? '' : 'background' }"
+        ></view>
+        <view class="up-content-middle" :style="{ height: canvasHeight + 'px' }">
+          <view
+            class="up-bg-transparent"
+            :style="{ width: cutX + 'px', transitionProperty: cutAnimation ? '' : 'background' }"
+          ></view>
+          <view
+            class="up-cropper-box"
+            :style="{
+              width: canvasWidth + 'px',
+              height: canvasHeight + 'px',
+              borderColor: borderColor,
+              transitionProperty: cutAnimation ? '' : 'background'
+            }"
+          >
+            <view
+              v-for="(item, index) in 4"
+              :key="index"
+              class="up-edge"
+              :class="[`up-${index < 2 ? 'top' : 'bottom'}-${index === 0 || index === 2 ? 'left' : 'right'}`]"
+              :style="{
+                width: edgeWidth,
+                height: edgeWidth,
+                borderColor: edgeColor,
+                borderWidth: edgeBorderWidth,
+                left: index === 0 || index === 2 ? `-${edgeOffsets}` : 'auto',
+                right: index === 1 || index === 3 ? `-${edgeOffsets}` : 'auto',
+                top: index < 2 ? `-${edgeOffsets}` : 'auto',
+                bottom: index > 1 ? `-${edgeOffsets}` : 'auto'
+              }"
+            ></view>
+          </view>
+          <view class="up-flex-auto up-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+        </view>
+        <view class="up-flex-auto up-bg-transparent" :style="{ transitionProperty: cutAnimation ? '' : 'background' }"></view>
+      </view>
+      <image
+        @load="imageLoad"
+        @error="imageLoad"
+        @touchstart="start"
+        @touchmove="move"
+        @touchend="end"
+        :style="{
+          width: imgWidth ? imgWidth + 'px' : 'auto',
+          height: imgHeight ? imgHeight + 'px' : 'auto',
+          transform: imgTransform,
+          transitionDuration: (cutAnimation ? 0.35 : 0) + 's'
+        }"
+        class="up-cropper-image"
+        :class="{ 'up-cropper__image-hidden': !imageUrl }"
+        :src="imageUrl"
+        mode="widthFix"
+      ></image>
+    </view>
+    <canvas
+      canvas-id="up-image-cropper"
+      id="up-image-cropper"
+      :disable-scroll="true"
+      :style="{ width: CROPPER_WIDTH * scaleRatio + 'px', height: CROPPER_HEIGHT * scaleRatio + 'px' }"
+      class="up-cropper-canvas"
+    ></canvas>
+    <view class="up-cropper-tabbar" v-if="!custom">
+      <view class="up-op-btn" @tap.stop="back">取消</view>
+      <image :src="rotateImg" class="up-rotate-img" @tap="setAngle"></image>
+      <view class="up-op-btn" @tap.stop="getImage">完成</view>
+    </view>
+  </view>
+</template>
+
+<script>
+/**
+ * 注意：组件中使用的图片地址，将文件复制到自己项目中
+ * 如果图片位置与组件同级，编译成小程序时图片会丢失
+ * 拷贝static下整个components文件夹
+ *也可直接转成base64（不建议）
+ * */
+export default {
+  name: 'tuiImageCropper',
+  emits: ['ready', 'cropper', 'imageLoad'],
+  props: {
+    //图片路径
+    imageUrl: {
+      type: String,
+      default: ''
+    },
+    /*
+				 默认正方形，可修改大小控制比例
+				 裁剪框高度 px
+				*/
+    height: {
+      type: Number,
+      default: 280
+    },
+    //裁剪框宽度 px
+    width: {
+      type: Number,
+      default: 280
+    },
+    //裁剪框最小宽度 px
+    minWidth: {
+      type: Number,
+      default: 100
+    },
+    //裁剪框最小高度 px
+    minHeight: {
+      type: Number,
+      default: 100
+    },
+    //裁剪框最大宽度 px
+    maxWidth: {
+      type: Number,
+      default: 360
+    },
+    //裁剪框最大高度 px
+    maxHeight: {
+      type: Number,
+      default: 360
+    },
+    //裁剪框border颜色
+    borderColor: {
+      type: String,
+      default: 'rgba(255,255,255,0.1)'
+    },
+    //裁剪框边缘线颜色
+    edgeColor: {
+      type: String,
+      default: '#FFFFFF'
+    },
+    //裁剪框边缘线宽度 w=h
+    edgeWidth: {
+      type: String,
+      default: '34rpx'
+    },
+    //裁剪框边缘线border宽度
+    edgeBorderWidth: {
+      type: String,
+      default: '6rpx'
+    },
+    //偏移距离，根据edgeBorderWidth进行调整
+    edgeOffsets: {
+      type: String,
+      default: '6rpx'
+    },
+    /**
+     * 如果宽度和高度都为true则裁剪框禁止拖动
+     * 裁剪框宽度锁定
+     */
+    lockWidth: {
+      type: Boolean,
+      default: false
+    },
+    //裁剪框高度锁定
+    lockHeight: {
+      type: Boolean,
+      default: false
+    },
+    //锁定裁剪框比例（放大或缩小）
+    lockRatio: {
+      type: Boolean,
+      default: false
+    },
+    //生成的图片尺寸相对剪裁框的比例
+    // #ifndef MP-QQ
+    scaleRatio: {
+      type: [Number, String],
+      default: 2
+    },
+    // #endif
+    // #ifdef MP-QQ
+    scaleRatio: {
+      type: [Number, String],
+      default: 3
+    },
+    // #endif
+    //图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
+    quality: {
+      type: Number,
+      default: 0.8
+    },
+    //图片旋转角度
+    rotateAngle: {
+      type: Number,
+      default: 0
+    },
+    //图片最小缩放比
+    minScale: {
+      type: Number,
+      default: 0.5
+    },
+    //图片最大缩放比
+    maxScale: {
+      type: Number,
+      default: 2
+    },
+    //是否禁用触摸旋转（为false则可以触摸转动图片，limitMove为false生效）
+    disableRotate: {
+      type: Boolean,
+      default: true
+    },
+    //是否限制移动范围(剪裁框只能在图片内,为true不可触摸转动图片)
+    limitMove: {
+      type: Boolean,
+      default: true
+    },
+    //自定义操作栏（为true时隐藏底部操作栏）
+    custom: {
+      type: Boolean,
+      default: false
+    },
+    //值发生改变开始裁剪（custom为true时生效）
+    startCutting: {
+      type: [Number, Boolean],
+      default: 0
+    },
+    /**
+     * 是否返回base64(H5端默认base64)
+     * 支持平台：App，微信小程序，支付宝小程序,H5(默认url就是base64)
+     **/
+    isBase64: {
+      type: Boolean,
+      default: false
+    },
+    //裁剪时是否显示loadding
+    loadding: {
+      type: Boolean,
+      default: true
+    },
+    //旋转icon
+    rotateImg: {
+      type: String,
+      default: '/static/components/cropper/img_rotate.png'
+    },
+    //裁剪后图片类型：jpg/png
+    fileType: {
+      type: String,
+      default: 'png'
+    }
+  },
+  data() {
+    return {
+      MOVE_THROTTLE: null, //触摸移动节流setTimeout
+      MOVE_THROTTLE_FLAG: true, //节流标识
+      TIME_CUT_CENTER: null,
+      CROPPER_WIDTH: 200, //裁剪框宽
+      CROPPER_HEIGHT: 200, //裁剪框高
+      CUT_START: null,
+      cutX: 0, //画布x轴起点
+      cutY: 0, //画布y轴起点0
+      touchRelative: [
+        {
+          x: 0,
+          y: 0
+        }
+      ], //手指或鼠标和图片中心的相对位置
+      flagCutTouch: false, //是否是拖动裁剪框
+      hypotenuseLength: 0, //双指触摸时斜边长度
+      flagEndTouch: false, //是否结束触摸
+      canvasWidth: 0,
+      canvasHeight: 0,
+      imgWidth: 0, //图片宽度
+      imgHeight: 0, //图片高度
+      scale: 1, //图片缩放比
+      angle: 0, //图片旋转角度
+      cutAnimation: false, //是否开启图片和裁剪框过渡
+      cutAnimationTime: null,
+      imgTop: 0, //图片上边距
+      imgLeft: 0, //图片左边距
+      ctx: null,
+      sysInfo: null
+    };
+  },
+  computed: {
+    imgTransform: function () {
+      return `translate3d(${this.imgLeft - this.imgWidth / 2}px,${this.imgTop - this.imgHeight / 2}px,0) scale(${this.scale}) rotate(${this.angle}deg)`;
+    }
+  },
+  watch: {
+    imageUrl(val, oldVal) {
+      this.imageReset();
+      this.showLoading();
+      uni.getImageInfo({
+        src: val,
+        success: (res) => {
+          //计算图片尺寸
+          this.imgComputeSize(res.width, res.height);
+          if (this.limitMove) {
+            //限制移动，不留空白处理
+            this.imgMarginDetectionScale();
+          }
+        },
+        fail: (err) => {
+          this.imgComputeSize();
+          if (this.limitMove) {
+            this.imgMarginDetectionScale();
+          }
+        }
+      });
+    },
+    //监听截取框宽高变化
+    canvasWidth(val) {
+      if (val < this.minWidth) {
+        this.canvasWidth = this.minWidth;
+      }
+      this.computeCutSize();
+    },
+    canvasHeight(val) {
+      if (val < this.minHeight) {
+        this.canvasHeight = this.minHeight;
+      }
+      this.computeCutSize();
+    },
+    rotateAngle(val) {
+      this.cutAnimation = true;
+      this.angle = val;
+    },
+    angle(val) {
+      this.moveStop();
+      if (this.limitMove && val % 90) {
+        this.angle = Math.round(val / 90) * 90;
+      }
+      this.imgMarginDetectionScale();
+    },
+    cutAnimation(val) {
+      //开启过渡260毫秒之后自动关闭
+      clearTimeout(this.cutAnimationTime);
+      if (val) {
+        this.cutAnimationTime = setTimeout(() => {
+          this.cutAnimation = false;
+        }, 260);
+      }
+    },
+    limitMove(val) {
+      if (val) {
+        if (this.angle % 90) {
+          this.angle = Math.round(this.angle / 90) * 90;
+        }
+        this.imgMarginDetectionScale();
+      }
+    },
+    cutY(value) {
+      this.cutDetectionPosition();
+    },
+    cutX(value) {
+      this.cutDetectionPosition();
+    },
+    startCutting(val) {
+      if (this.custom && val) {
+        this.getImage();
+      }
+    }
+  },
+  mounted() {
+    this.sysInfo = uni.getSystemInfoSync();
+    this.imgTop = this.sysInfo.windowHeight / 2;
+    this.imgLeft = this.sysInfo.windowWidth / 2;
+    this.CROPPER_WIDTH = this.width;
+    this.CROPPER_HEIGHT = this.height;
+    this.canvasHeight = this.height;
+    this.canvasWidth = this.width;
+    this.ctx = uni.createCanvasContext('up-image-cropper', this);
+    this.setCutCenter();
+    //设置裁剪框大小>设置图片尺寸>绘制canvas
+    this.computeCutSize();
+    //检查裁剪框是否在范围内
+    this.cutDetectionPosition();
+    setTimeout(() => {
+      this.$emit('ready', {});
+    }, 200);
+  },
+  methods: {
+    //网络图片转成本地文件[同步执行]
+    async getLocalImage(url) {
+      return await new Promise((resolve, reject) => {
+        uni.downloadFile({
+          url: url,
+          success: (res) => {
+            resolve(res.tempFilePath);
+          },
+          fail: (res) => {
+            reject(false);
+          }
+        });
+      });
+    },
+    //返回裁剪后图片信息
+    getImage() {
+      if (!this.imageUrl) {
+        uni.showToast({
+          title: '请选择图片',
+          icon: 'none'
+        });
+        return;
+      }
+      this.loadding && this.showLoading();
+      let draw = async () => {
+        //图片实际大小
+        let imgWidth = this.imgWidth * this.scale * this.scaleRatio;
+        let imgHeight = this.imgHeight * this.scale * this.scaleRatio;
+        //canvas和图片的相对距离
+        let xpos = this.imgLeft - this.cutX;
+        let ypos = this.imgTop - this.cutY;
+        //旋转画布
+        this.ctx.translate(xpos * this.scaleRatio, ypos * this.scaleRatio);
+        this.ctx.rotate((this.angle * Math.PI) / 180);
+        let imgUrl = this.imageUrl;
+        // #ifdef APP-PLUS || MP-WEIXIN
+        if (~this.imageUrl.indexOf('https:')) {
+          imgUrl = await this.getLocalImage(this.imageUrl);
+        }
+        // #endif
+        this.ctx.drawImage(imgUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
+        this.ctx.draw(false, () => {
+          let params = {
+            width: this.canvasWidth * this.scaleRatio,
+            height: Math.round(this.canvasHeight * this.scaleRatio),
+            // #ifdef MP-QQ
+            destWidth: this.canvasWidth * this.scaleRatio * 2,
+            destHeight: Math.round(this.canvasHeight) * this.scaleRatio * 2,
+            // #endif
+
+            // #ifndef MP-QQ
+            destWidth: this.canvasWidth * this.scaleRatio,
+            destHeight: Math.round(this.canvasHeight) * this.scaleRatio,
+            // #endif
+
+            fileType: this.fileType || 'png',
+            quality: this.quality
+          };
+          let data = {
+            url: '',
+            base64: '',
+            width: this.canvasWidth * this.scaleRatio,
+            height: this.canvasHeight * this.scaleRatio
+          };
+          // #ifdef MP-ALIPAY
+
+          if (this.isBase64) {
+            this.ctx.toDataURL(params).then((dataURL) => {
+              data.base64 = dataURL;
+              this.loadding && uni.hideLoading();
+              this.ctx.rotate(((360 - (this.angle % 360)) * Math.PI) / 180);
+              this.ctx.translate(-xpos * this.scaleRatio, -ypos * this.scaleRatio);
+              this.ctx.clearRect(0, 0, this.canvasWidth * this.scaleRatio, this.canvasHeight * this.scaleRatio);
+              this.ctx.draw();
+              this.$emit('cropper', data);
+            });
+          } else {
+            this.ctx.toTempFilePath({
+              ...params,
+              success: (res) => {
+                data.url = res.apFilePath;
+                this.loadding && uni.hideLoading();
+                this.ctx.rotate(((360 - (this.angle % 360)) * Math.PI) / 180);
+                this.ctx.translate(-xpos * this.scaleRatio, -ypos * this.scaleRatio);
+                this.ctx.clearRect(0, 0, this.canvasWidth * this.scaleRatio, this.canvasHeight * this.scaleRatio);
+                this.ctx.draw();
+                this.$emit('cropper', data);
+              }
+            });
+          }
+          // #endif
+
+          // #ifndef MP-ALIPAY
+          let isBase64 = this.isBase64;
+          // #ifdef MP-BAIDU || MP-TOUTIAO || H5
+          isBase64 = false;
+          // #endif
+          if (isBase64) {
+            // #ifndef MP-WEIXIN
+            uni.canvasGetImageData(
+              {
+                canvasId: 'up-image-cropper',
+                x: 0,
+                y: 0,
+                width: this.canvasWidth * this.scaleRatio,
+                height: Math.round(this.canvasHeight * this.scaleRatio),
+                success: (res) => {
+                  const arrayBuffer = new Uint8Array(res.data);
+                  const base64 = uni.arrayBufferToBase64(arrayBuffer);
+                  data.base64 = base64;
+                  this.loadding && uni.hideLoading();
+                  this.$emit('cropper', data);
+                }
+              },
+              this
+            );
+            // #endif
+
+            // #ifdef MP-WEIXIN
+            uni.canvasToTempFilePath(
+              {
+                ...params,
+                canvasId: 'up-image-cropper',
+                success: (res) => {
+                  data.url = res.tempFilePath;
+                  const fs = wx.getFileSystemManager();
+                  // 读取文件， base64 格式
+                  const base64Str = fs.readFileSync(res.tempFilePath, 'base64');
+                  const imgBase64 = `data:image/png;base64,${base64Str}`;
+                  data.base64 = imgBase64;
+                  this.loadding && uni.hideLoading();
+                  this.$emit('cropper', data);
+                },
+                fail(res) {
+                  console.log(res);
+                }
+              },
+              this
+            );
+            // #endif
+          } else {
+            uni.canvasToTempFilePath(
+              {
+                ...params,
+                canvasId: 'up-image-cropper',
+                success: (res) => {
+                  data.url = res.tempFilePath;
+                  // #ifdef H5
+                  data.base64 = res.tempFilePath;
+                  // #endif
+                  this.loadding && uni.hideLoading();
+                  this.$emit('cropper', data);
+                },
+                fail(res) {
+                  console.log(res);
+                }
+              },
+              this
+            );
+          }
+          // #endif
+        });
+      };
+      if (this.CROPPER_WIDTH != this.canvasWidth || this.CROPPER_HEIGHT != this.canvasHeight) {
+        this.CROPPER_WIDTH = this.canvasWidth;
+        this.CROPPER_HEIGHT = this.canvasHeight;
+        this.ctx.draw();
+        this.$nextTick(() => {
+          setTimeout(() => {
+            draw();
+          }, 100);
+        });
+      } else {
+        draw();
+      }
+    },
+    /**
+     * 设置剪裁框和图片居中
+     */
+    setCutCenter() {
+      let sys = this.sysInfo || uni.getSystemInfoSync();
+      let cutY = (sys.windowHeight - this.canvasHeight) * 0.5;
+      let cutX = (sys.windowWidth - this.canvasWidth) * 0.5;
+      //顺序不能变
+      this.imgTop = this.imgTop - this.cutY + cutY;
+      this.cutY = cutY; //截取的框上边距
+      this.imgLeft = this.imgLeft - this.cutX + cutX;
+      this.cutX = cutX; //截取的框左边距
+    },
+    imageReset() {
+      // this.cutAnimation = true;
+      this.scale = 1;
+      this.angle = 0;
+      let sys = this.sysInfo || uni.getSystemInfoSync();
+      this.imgTop = sys.windowHeight / 2;
+      this.imgLeft = sys.windowWidth / 2;
+    },
+    imageLoad(e) {
+      this.imageReset();
+      uni.hideLoading();
+      this.$emit('imageLoad', {});
+    },
+    //检测剪裁框位置是否在允许的范围内(屏幕内)
+    cutDetectionPosition() {
+      let cutDetectionPositionTop = () => {
+          //检测上边距是否在范围内
+          if (this.cutY < 0) {
+            this.cutY = 0;
+          }
+          if (this.cutY > this.sysInfo.windowHeight - this.canvasHeight) {
+            this.cutY = this.sysInfo.windowHeight - this.canvasHeight;
+          }
+        },
+        cutDetectionPositionLeft = () => {
+          //检测左边距是否在范围内
+          if (this.cutX < 0) {
+            this.cutX = 0;
+          }
+          if (this.cutX > this.sysInfo.windowWidth - this.canvasWidth) {
+            this.cutX = this.sysInfo.windowWidth - this.canvasWidth;
+          }
+        };
+      //裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中）
+      if (this.cutY == null && this.cutX == null) {
+        let cutY = (this.sysInfo.windowHeight - this.canvasHeight) * 0.5;
+        let cutX = (this.sysInfo.windowWidth - this.canvasWidth) * 0.5;
+        this.cutY = cutY; //截取的框上边距
+        this.cutX = cutX; //截取的框左边距
+      } else if (this.cutY != null && this.cutX != null) {
+        cutDetectionPositionTop();
+        cutDetectionPositionLeft();
+      } else if (this.cutY != null && this.cutX == null) {
+        cutDetectionPositionTop();
+        this.cutX = (this.sysInfo.windowWidth - this.canvasWidth) / 2;
+      } else if (this.cutY == null && this.cutX != null) {
+        cutDetectionPositionLeft();
+        this.cutY = (this.sysInfo.windowHeight - this.canvasHeight) / 2;
+      }
+    },
+    /**
+     * 图片边缘检测-位置
+     */
+    imgMarginDetectionPosition(scale) {
+      if (!this.limitMove) return;
+      let left = this.imgLeft;
+      let top = this.imgTop;
+      scale = scale || this.scale;
+      let imgWidth = this.imgWidth;
+      let imgHeight = this.imgHeight;
+      if ((this.angle / 90) % 2) {
+        imgWidth = this.imgHeight;
+        imgHeight = this.imgWidth;
+      }
+      left = this.cutX + (imgWidth * scale) / 2 >= left ? left : this.cutX + (imgWidth * scale) / 2;
+      left =
+        this.cutX + this.canvasWidth - (imgWidth * scale) / 2 <= left
+          ? left
+          : this.cutX + this.canvasWidth - (imgWidth * scale) / 2;
+      top = this.cutY + (imgHeight * scale) / 2 >= top ? top : this.cutY + (imgHeight * scale) / 2;
+      top =
+        this.cutY + this.canvasHeight - (imgHeight * scale) / 2 <= top
+          ? top
+          : this.cutY + this.canvasHeight - (imgHeight * scale) / 2;
+      this.imgLeft = left;
+      this.imgTop = top;
+      this.scale = scale;
+    },
+    /**
+     * 图片边缘检测-缩放
+     */
+    imgMarginDetectionScale(scale) {
+      if (!this.limitMove) return;
+      scale = scale || this.scale;
+      let imgWidth = this.imgWidth;
+      let imgHeight = this.imgHeight;
+      if ((this.angle / 90) % 2) {
+        imgWidth = this.imgHeight;
+        imgHeight = this.imgWidth;
+      }
+      if (imgWidth * scale < this.canvasWidth) {
+        scale = this.canvasWidth / imgWidth;
+      }
+      if (imgHeight * scale < this.canvasHeight) {
+        scale = Math.max(scale, this.canvasHeight / imgHeight);
+      }
+      this.imgMarginDetectionPosition(scale);
+    },
+    /**
+     * 计算图片尺寸
+     */
+    imgComputeSize(width, height) {
+      //默认按图片最小边 = 对应裁剪框尺寸
+      let imgWidth = width,
+        imgHeight = height;
+      if (imgWidth && imgHeight) {
+        if (imgWidth / imgHeight > (this.canvasWidth || this.width) / (this.canvasHeight || this.height)) {
+          imgHeight = this.canvasHeight || this.height;
+          imgWidth = (width / height) * imgHeight;
+        } else {
+          imgWidth = this.canvasWidth || this.width;
+          imgHeight = (height / width) * imgWidth;
+        }
+      } else {
+        let sys = this.sysInfo || uni.getSystemInfoSync();
+        imgWidth = sys.windowWidth;
+        imgHeight = 0;
+      }
+      this.imgWidth = imgWidth;
+      this.imgHeight = imgHeight;
+    },
+    //改变截取框大小
+    computeCutSize() {
+      if (this.canvasWidth > this.sysInfo.windowWidth) {
+        this.canvasWidth = this.sysInfo.windowWidth;
+      } else if (this.canvasWidth + this.cutX > this.sysInfo.windowWidth) {
+        this.cutX = this.sysInfo.windowWidth - this.cutX;
+      }
+      if (this.canvasHeight > this.sysInfo.windowHeight) {
+        this.canvasHeight = this.sysInfo.windowHeight;
+      } else if (this.canvasHeight + this.cutY > this.sysInfo.windowHeight) {
+        this.cutY = this.sysInfo.windowHeight - this.cutY;
+      }
+    },
+    //开始触摸
+    start(e) {
+      this.flagEndTouch = false;
+      if (e.touches.length == 1) {
+        //单指拖动
+        this.touchRelative[0] = {
+          x: e.touches[0].clientX - this.imgLeft,
+          y: e.touches[0].clientY - this.imgTop
+        };
+      } else {
+        //双指放大
+        let width = Math.abs(e.touches[0].clientX - e.touches[1].clientX);
+        let height = Math.abs(e.touches[0].clientY - e.touches[1].clientY);
+        this.touchRelative = [
+          {
+            x: e.touches[0].clientX - this.imgLeft,
+            y: e.touches[0].clientY - this.imgTop
+          },
+          {
+            x: e.touches[1].clientX - this.imgLeft,
+            y: e.touches[1].clientY - this.imgTop
+          }
+        ];
+        this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+      }
+    },
+    moveThrottle() {
+      if (this.sysInfo.platform == 'android') {
+        clearTimeout(this.MOVE_THROTTLE);
+        this.MOVE_THROTTLE = setTimeout(() => {
+          this.MOVE_THROTTLE_FLAG = true;
+        }, 800 / 40);
+        return this.MOVE_THROTTLE_FLAG;
+      } else {
+        this.MOVE_THROTTLE_FLAG = true;
+      }
+    },
+    move(e) {
+      if (this.flagEndTouch || !this.MOVE_THROTTLE_FLAG) return;
+      this.MOVE_THROTTLE_FLAG = false;
+      this.moveThrottle();
+      this.moveDuring();
+      if (e.touches.length == 1) {
+        //单指拖动
+        let left = e.touches[0].clientX - this.touchRelative[0].x,
+          top = e.touches[0].clientY - this.touchRelative[0].y;
+        //图像边缘检测,防止截取到空白
+        this.imgLeft = left;
+        this.imgTop = top;
+        this.imgMarginDetectionPosition();
+      } else {
+        //双指放大
+        let width = Math.abs(e.touches[0].clientX - e.touches[1].clientX),
+          height = Math.abs(e.touches[0].clientY - e.touches[1].clientY),
+          hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
+          scale = this.scale * (hypotenuse / this.hypotenuseLength),
+          current_deg = 0;
+        scale = scale <= this.minScale ? this.minScale : scale;
+        scale = scale >= this.maxScale ? this.maxScale : scale;
+        //图像边缘检测,防止截取到空白
+        // this.scale = scale;
+        this.imgMarginDetectionScale(scale);
+        //双指旋转(如果没禁用旋转)
+        let touchRelative = [
+          {
+            x: e.touches[0].clientX - this.imgLeft,
+            y: e.touches[0].clientY - this.imgTop
+          },
+          {
+            x: e.touches[1].clientX - this.imgLeft,
+            y: e.touches[1].clientY - this.imgTop
+          }
+        ];
+        if (!this.disableRotate) {
+          let first_atan = (180 / Math.PI) * Math.atan2(touchRelative[0].y, touchRelative[0].x);
+          let first_atan_old = (180 / Math.PI) * Math.atan2(this.touchRelative[0].y, this.touchRelative[0].x);
+          let second_atan = (180 / Math.PI) * Math.atan2(touchRelative[1].y, touchRelative[1].x);
+          let second_atan_old = (180 / Math.PI) * Math.atan2(this.touchRelative[1].y, this.touchRelative[1].x);
+          //当前旋转的角度
+          let first_deg = first_atan - first_atan_old,
+            second_deg = second_atan - second_atan_old;
+          if (first_deg != 0) {
+            current_deg = first_deg;
+          } else if (second_deg != 0) {
+            current_deg = second_deg;
+          }
+        }
+        this.touchRelative = touchRelative;
+        this.hypotenuseLength = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
+        //更新视图
+        this.angle = this.angle + current_deg;
+        this.scale = this.scale;
+      }
+    },
+    //结束操作
+    end(e) {
+      this.flagEndTouch = true;
+      this.moveStop();
+    },
+    //裁剪框处理
+    cutTouchMove(e) {
+      if (this.flagCutTouch && this.MOVE_THROTTLE_FLAG) {
+        if (this.lockRatio && (this.lockWidth || this.lockHeight)) return;
+        //节流
+        this.MOVE_THROTTLE_FLAG = false;
+        this.moveThrottle();
+        let width = this.canvasWidth,
+          height = this.canvasHeight,
+          cutY = this.cutY,
+          cutX = this.cutX,
+          size_correct = () => {
+            width = width <= this.maxWidth ? (width >= this.minWidth ? width : this.minWidth) : this.maxWidth;
+            height = height <= this.maxHeight ? (height >= this.minHeight ? height : this.minHeight) : this.maxHeight;
+          },
+          size_inspect = () => {
+            if (
+              (width > this.maxWidth || width < this.minWidth || height > this.maxHeight || height < this.minHeight) &&
+              this.lockRatio
+            ) {
+              size_correct();
+              return false;
+            } else {
+              size_correct();
+              return true;
+            }
+          };
+        height =
+          this.CUT_START.height +
+          (this.CUT_START.corner > 1 && this.CUT_START.corner < 4 ? 1 : -1) * (this.CUT_START.y - e.touches[0].clientY);
+        switch (this.CUT_START.corner) {
+          case 1:
+            width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX;
+            if (this.lockRatio) {
+              height = width / (this.canvasWidth / this.canvasHeight);
+            }
+            if (!size_inspect()) return;
+            break;
+          case 2:
+            width = this.CUT_START.width - this.CUT_START.x + e.touches[0].clientX;
+            if (this.lockRatio) {
+              height = width / (this.canvasWidth / this.canvasHeight);
+            }
+            if (!size_inspect()) return;
+            cutY = this.CUT_START.cutY - (height - this.CUT_START.height);
+            break;
+          case 3:
+            width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX;
+            if (this.lockRatio) {
+              height = width / (this.canvasWidth / this.canvasHeight);
+            }
+            if (!size_inspect()) return;
+            cutY = this.CUT_START.cutY - (height - this.CUT_START.height);
+            cutX = this.CUT_START.cutX - (width - this.CUT_START.width);
+            break;
+          case 4:
+            width = this.CUT_START.width + this.CUT_START.x - e.touches[0].clientX;
+            if (this.lockRatio) {
+              height = width / (this.canvasWidth / this.canvasHeight);
+            }
+            if (!size_inspect()) return;
+            cutX = this.CUT_START.cutX - (width - this.CUT_START.width);
+            break;
+          default:
+            break;
+        }
+        if (!this.lockWidth && !this.lockHeight) {
+          this.canvasWidth = width;
+          this.cutX = cutX;
+          this.canvasHeight = height;
+          this.cutY = cutY;
+        } else if (!this.lockWidth) {
+          this.canvasWidth = width;
+          this.cutX = cutX;
+        } else if (!this.lockHeight) {
+          this.canvasHeight = height;
+          this.cutY = cutY;
+        }
+        this.imgMarginDetectionScale();
+      }
+    },
+    cutTouchStart(e) {
+      let currentX = e.touches[0].clientX;
+      let currentY = e.touches[0].clientY;
+
+      /*
+       * (右下-1 右上-2 左上-3 左下-4)
+       * left_x [3,4]
+       * top_y [2,3]
+       * right_x [1,2]
+       * bottom_y [1,4]
+       */
+      let left_x1 = this.cutX - 24;
+      let left_x2 = this.cutX + 24;
+
+      let top_y1 = this.cutY - 24;
+      let top_y2 = this.cutY + 24;
+
+      let right_x1 = this.cutX + this.canvasWidth - 24;
+      let right_x2 = this.cutX + this.canvasWidth + 24;
+
+      let bottom_y1 = this.cutY + this.canvasHeight - 24;
+      let bottom_y2 = this.cutY + this.canvasHeight + 24;
+
+      if (currentX > right_x1 && currentX < right_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+        this.moveDuring();
+        this.flagCutTouch = true;
+        this.flagEndTouch = true;
+        this.CUT_START = {
+          width: this.canvasWidth,
+          height: this.canvasHeight,
+          x: currentX,
+          y: currentY,
+          corner: 1
+        };
+      } else if (currentX > right_x1 && currentX < right_x2 && currentY > top_y1 && currentY < top_y2) {
+        this.moveDuring();
+        this.flagCutTouch = true;
+        this.flagEndTouch = true;
+        this.CUT_START = {
+          width: this.canvasWidth,
+          height: this.canvasHeight,
+          x: currentX,
+          y: currentY,
+          cutY: this.cutY,
+          cutX: this.cutX,
+          corner: 2
+        };
+      } else if (currentX > left_x1 && currentX < left_x2 && currentY > top_y1 && currentY < top_y2) {
+        this.moveDuring();
+        this.flagCutTouch = true;
+        this.flagEndTouch = true;
+        this.CUT_START = {
+          width: this.canvasWidth,
+          height: this.canvasHeight,
+          cutY: this.cutY,
+          cutX: this.cutX,
+          x: currentX,
+          y: currentY,
+          corner: 3
+        };
+      } else if (currentX > left_x1 && currentX < left_x2 && currentY > bottom_y1 && currentY < bottom_y2) {
+        this.moveDuring();
+        this.flagCutTouch = true;
+        this.flagEndTouch = true;
+        this.CUT_START = {
+          width: this.canvasWidth,
+          height: this.canvasHeight,
+          cutY: this.cutY,
+          cutX: this.cutX,
+          x: currentX,
+          y: currentY,
+          corner: 4
+        };
+      }
+    },
+    cutTouchEnd(e) {
+      this.moveStop();
+      this.flagCutTouch = false;
+    },
+    //停止移动时需要做的操作
+    moveStop() {
+      //清空之前的自动居中延迟函数并添加最新的
+      clearTimeout(this.TIME_CUT_CENTER);
+      this.TIME_CUT_CENTER = setTimeout(() => {
+        //动画启动
+        if (!this.cutAnimation) {
+          this.cutAnimation = true;
+        }
+        this.setCutCenter();
+      }, 800);
+    },
+    //移动中
+    moveDuring() {
+      //清空之前的自动居中延迟函数
+      clearTimeout(this.TIME_CUT_CENTER);
+    },
+    showLoading() {
+      uni.showLoading({
+        // #ifndef MP-ALIPAY
+        mask: true,
+        // #endif
+        title: '请稍候...'
+      });
+    },
+    stop() {},
+    back() {
+      uni.navigateBack();
+    },
+    setAngle() {
+      this.cutAnimation = true;
+      this.angle = this.angle + 90;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.up-container {
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+.up-image-cropper {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+}
+
+.up-content {
+  width: 100vw;
+  height: 100vh;
+  padding: 0;
+  position: absolute;
+  z-index: 9;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+.up-bg-transparent {
+  background-color: rgba(0, 0, 0, 0.6);
+  transition-duration: 0.35s;
+}
+
+.up-content-top {
+  pointer-events: none;
+}
+
+.up-content-middle {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.up-cropper-box {
+  position: relative;
+  /* transition-duration: 0.3s; */
+  border-style: solid;
+  border-width: 1rpx;
+  box-sizing: border-box;
+}
+
+.up-flex-auto {
+  flex: auto;
+}
+
+.up-cropper-image {
+  width: 100%;
+  border-style: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  transform-origin: center;
+}
+
+.up-cropper__image-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.up-cropper-canvas {
+  position: fixed;
+  z-index: 10;
+  left: -2000px;
+  top: -2000px;
+  pointer-events: none;
+}
+
+.up-edge {
+  border-style: solid;
+  pointer-events: auto;
+  position: absolute;
+  box-sizing: border-box;
+}
+
+.up-top-left {
+  border-bottom-width: 0 !important;
+  border-right-width: 0 !important;
+}
+
+.up-top-right {
+  border-bottom-width: 0 !important;
+  border-left-width: 0 !important;
+}
+
+.up-bottom-left {
+  border-top-width: 0 !important;
+  border-right-width: 0 !important;
+}
+
+.up-bottom-right {
+  border-top-width: 0 !important;
+  border-left-width: 0 !important;
+}
+
+.up-cropper-tabbar {
+  width: 100%;
+  height: 120rpx;
+  padding: 0 40rpx;
+  box-sizing: border-box;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #ffffff;
+  font-size: 32rpx;
+}
+
+.up-cropper-tabbar::after {
+  content: ' ';
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+  -webkit-transform: scaleY(0.5) translateZ(0);
+  transform: scaleY(0.5) translateZ(0);
+  transform-origin: 0 100%;
+}
+
+.up-op-btn {
+  height: 80rpx;
+  display: flex;
+  align-items: center;
+}
+
+.up-rotate-img {
+  width: 44rpx;
+  height: 44rpx;
+}
+</style>