@10yun/cv-mobile-ui 0.5.53 → 0.5.55

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

@@ -1,1058 +0,0 @@
-<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"
-        :src="imageUrl"
-        v-if="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: 'fuiImageCropper',
-  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
-    },
-    //生成的图片尺寸相对剪裁框的比例
-    scaleRatio: {
-      type: Number,
-      default: 2 // 3
-    },
-    //图片的质量，取值范围为 (0, 1]，不在范围内时当作1.0处理
-    quality: {
-      type: Number,
-      default: 0.8 //1
-    },
-    //图片旋转角度
-    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'
-    }
-  },
-  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() {
-      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: {
-    //返回裁剪后图片信息
-    getImage() {
-      if (!this.imageUrl) {
-        uni.showToast({
-          title: '请选择图片',
-          icon: 'none'
-        });
-        return;
-      }
-      this.loadding && this.showLoading();
-      let draw = () => {
-        //图片实际大小
-        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);
-        this.ctx.drawImage(this.imageUrl, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
-        this.ctx.draw(false, () => {
-          let params = {
-            width: this.canvasWidth * this.scaleRatio,
-            height: Math.round(this.canvasHeight * this.scaleRatio),
-            destWidth: this.canvasWidth * this.scaleRatio,
-            destHeight: Math.round(this.canvasHeight) * this.scaleRatio,
-            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.$emit('cropper', data);
-            });
-          } else {
-            this.ctx.toTempFilePath({
-              ...params,
-              success: (res) => {
-                data.url = res.tempFilePath;
-                this.loadding && uni.hideLoading();
-                this.$emit('cropper', data);
-              }
-            });
-          }
-          // #endif
-
-          // #ifndef MP-ALIPAY
-          // #ifdef MP-BAIDU || MP-TOUTIAO || H5
-          this.isBase64 = false;
-          // #endif
-          if (this.isBase64) {
-            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; // dataURL
-                this.loadding && uni.hideLoading();
-                this.$emit('cropper', data);
-              }
-            });
-          } 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({
-        title: '请稍候...',
-        mask: true
-      });
-    },
-    stop() {},
-    back() {
-      uni.navigateBack();
-    },
-    setAngle() {
-      this.cutAnimation = true;
-      this.angle = this.angle + 90;
-    }
-  }
-};
-</script>
-
-<style scoped>
-.up-container {
-  width: 100vw;
-  height: 100vh;
-  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;
-  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-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>