hs-admin-ui 5.8.0 → 5.8.2

package/dist/uploadAvatar-DTnLl8jn.mjs

@@ -0,0 +1,2006 @@
+import { openBlock, createElementBlock, withDirectives, createElementVNode, normalizeStyle, vShow, createCommentVNode, normalizeClass, toDisplayString, defineComponent, ref, onMounted, toRefs, reactive, resolveComponent, createVNode, withCtx, unref, createTextVNode } from "vue";
+import { E as Exif } from "./uploadAvatar.vue_vue_type_style_index_0_scoped_99513ec9_lang-DOiOwYLl.mjs";
+import { _ as _export_sfc, Z as systemStore, d as ElMessage, $ as useFileController } from "./index-DvYORydh.mjs";
+const _sfc_main$1 = {
+  data: function() {
+    return {
+      // 容器高宽
+      w: 0,
+      h: 0,
+      // 图片缩放比例
+      scale: 1,
+      // 图片偏移x轴
+      x: 0,
+      // 图片偏移y轴
+      y: 0,
+      // 图片加载
+      loading: true,
+      // 图片真实宽度
+      trueWidth: 0,
+      // 图片真实高度
+      trueHeight: 0,
+      move: true,
+      // 移动的x
+      moveX: 0,
+      // 移动的y
+      moveY: 0,
+      // 开启截图
+      crop: false,
+      // 正在截图
+      cropping: false,
+      // 裁剪框大小
+      cropW: 0,
+      cropH: 0,
+      cropOldW: 0,
+      cropOldH: 0,
+      // 判断是否能够改变
+      canChangeX: false,
+      canChangeY: false,
+      // 改变的基准点
+      changeCropTypeX: 1,
+      changeCropTypeY: 1,
+      // 裁剪框的坐标轴
+      cropX: 0,
+      cropY: 0,
+      cropChangeX: 0,
+      cropChangeY: 0,
+      cropOffsertX: 0,
+      cropOffsertY: 0,
+      // 支持的滚动事件
+      support: "",
+      // 移动端手指缩放
+      touches: [],
+      touchNow: false,
+      // 图片旋转
+      rotate: 0,
+      isIos: false,
+      orientation: 0,
+      imgs: "",
+      // 图片缩放系数
+      coe: 0.2,
+      // 是否正在多次缩放
+      scaling: false,
+      scalingSet: "",
+      coeStatus: "",
+      // 控制emit触发频率
+      isCanShow: true
+    };
+  },
+  props: {
+    img: {
+      type: [String, Blob, null, File],
+      default: ""
+    },
+    // 输出图片压缩比
+    outputSize: {
+      type: Number,
+      default: 1
+    },
+    outputType: {
+      type: String,
+      default: "jpeg"
+    },
+    info: {
+      type: Boolean,
+      default: true
+    },
+    // 是否开启滚轮放大缩小
+    canScale: {
+      type: Boolean,
+      default: true
+    },
+    // 是否自成截图框
+    autoCrop: {
+      type: Boolean,
+      default: false
+    },
+    autoCropWidth: {
+      type: [Number, String],
+      default: 0
+    },
+    autoCropHeight: {
+      type: [Number, String],
+      default: 0
+    },
+    // 是否开启固定宽高比
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    // 宽高比 w/h
+    fixedNumber: {
+      type: Array,
+      default: () => {
+        return [1, 1];
+      }
+    },
+    // 固定大小 禁止改变截图框大小
+    fixedBox: {
+      type: Boolean,
+      default: false
+    },
+    // 输出截图是否缩放
+    full: {
+      type: Boolean,
+      default: false
+    },
+    // 是否可以拖动图片
+    canMove: {
+      type: Boolean,
+      default: true
+    },
+    // 是否可以拖动截图框
+    canMoveBox: {
+      type: Boolean,
+      default: true
+    },
+    // 上传图片按照原始比例显示
+    original: {
+      type: Boolean,
+      default: false
+    },
+    // 截图框能否超过图片
+    centerBox: {
+      type: Boolean,
+      default: false
+    },
+    // 是否根据dpr输出高清图片
+    high: {
+      type: Boolean,
+      default: true
+    },
+    // 截图框展示宽高类型
+    infoTrue: {
+      type: Boolean,
+      default: false
+    },
+    // 可以压缩图片宽高  默认不超过200
+    maxImgSize: {
+      type: [Number, String],
+      default: 2e3
+    },
+    // 倍数  可渲染当前截图框的n倍 0 - 1000;
+    enlarge: {
+      type: [Number, String],
+      default: 1
+    },
+    // 自动预览的固定宽度
+    preW: {
+      type: [Number, String],
+      default: 0
+    },
+    /*
+      图片布局方式 mode 实现和css背景一样的效果
+      contain  居中布局 默认不会缩放 保证图片在容器里面 mode: 'contain'
+      cover    拉伸布局 填充整个容器  mode: 'cover'
+      如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。 mode: '50px'
+      如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。 mode: '50px 60px'
+    */
+    mode: {
+      type: String,
+      default: "contain"
+    },
+    //限制最小区域,可传1以上的数字和字符串，限制长宽都是这么大
+    // 也可以传数组[90,90] 
+    limitMinSize: {
+      type: [Number, Array, String],
+      default: () => {
+        return 10;
+      },
+      validator: function(value) {
+        if (Array.isArray(value)) {
+          return Number(value[0]) >= 0 && Number(value[1]) >= 0;
+        } else {
+          return Number(value) >= 0;
+        }
+      }
+    },
+    // 导出时,填充背景颜色
+    fillColor: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    cropInfo() {
+      let obj = {};
+      obj.top = this.cropOffsertY > 21 ? "-21px" : "0px";
+      obj.width = this.cropW > 0 ? this.cropW : 0;
+      obj.height = this.cropH > 0 ? this.cropH : 0;
+      if (this.infoTrue) {
+        let dpr = 1;
+        if (this.high && !this.full) {
+          dpr = window.devicePixelRatio;
+        }
+        if (this.enlarge !== 1 & !this.full) {
+          dpr = Math.abs(Number(this.enlarge));
+        }
+        obj.width = obj.width * dpr;
+        obj.height = obj.height * dpr;
+        if (this.full) {
+          obj.width = obj.width / this.scale;
+          obj.height = obj.height / this.scale;
+        }
+      }
+      obj.width = obj.width.toFixed(0);
+      obj.height = obj.height.toFixed(0);
+      return obj;
+    },
+    isIE() {
+      const isIE = !!window.ActiveXObject || "ActiveXObject" in window;
+      return isIE;
+    },
+    passive() {
+      return this.isIE ? null : {
+        passive: false
+      };
+    }
+  },
+  watch: {
+    // 如果图片改变， 重新布局
+    img() {
+      this.checkedImg();
+    },
+    imgs(val) {
+      if (val === "") {
+        return;
+      }
+      this.reload();
+    },
+    cropW() {
+      this.showPreview();
+    },
+    cropH() {
+      this.showPreview();
+    },
+    cropOffsertX() {
+      this.showPreview();
+    },
+    cropOffsertY() {
+      this.showPreview();
+    },
+    scale(val, oldVal) {
+      this.showPreview();
+    },
+    x() {
+      this.showPreview();
+    },
+    y() {
+      this.showPreview();
+    },
+    autoCrop(val) {
+      if (val) {
+        this.goAutoCrop();
+      }
+    },
+    // 修改了自动截图框
+    autoCropWidth() {
+      if (this.autoCrop) {
+        this.goAutoCrop();
+      }
+    },
+    autoCropHeight() {
+      if (this.autoCrop) {
+        this.goAutoCrop();
+      }
+    },
+    mode() {
+      this.checkedImg();
+    },
+    rotate() {
+      this.showPreview();
+      if (this.autoCrop) {
+        this.goAutoCrop(this.cropW, this.cropH);
+      } else {
+        if (this.cropW > 0 || this.cropH > 0) {
+          this.goAutoCrop(this.cropW, this.cropH);
+        }
+      }
+    }
+  },
+  methods: {
+    getVersion(name) {
+      var arr = navigator.userAgent.split(" ");
+      var chromeVersion = "";
+      let result = 0;
+      const reg = new RegExp(name, "i");
+      for (var i = 0; i < arr.length; i++) {
+        if (reg.test(arr[i]))
+          chromeVersion = arr[i];
+      }
+      if (chromeVersion) {
+        result = chromeVersion.split("/")[1].split(".");
+      } else {
+        result = ["0", "0", "0"];
+      }
+      return result;
+    },
+    checkOrientationImage(img, orientation, width, height) {
+      if (this.getVersion("chrome")[0] >= 81) {
+        orientation = -1;
+      } else {
+        if (this.getVersion("safari")[0] >= 605) {
+          const safariVersion = this.getVersion("version");
+          if (safariVersion[0] > 13 && safariVersion[1] > 1) {
+            orientation = -1;
+          }
+        } else {
+          const isIos = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
+          if (isIos) {
+            let version = isIos[1];
+            version = version.split("_");
+            if (version[0] > 13 || version[0] >= 13 && version[1] >= 4) {
+              orientation = -1;
+            }
+          }
+        }
+      }
+      let canvas = document.createElement("canvas");
+      let ctx = canvas.getContext("2d");
+      ctx.save();
+      switch (orientation) {
+        case 2:
+          canvas.width = width;
+          canvas.height = height;
+          ctx.translate(width, 0);
+          ctx.scale(-1, 1);
+          break;
+        case 3:
+          canvas.width = width;
+          canvas.height = height;
+          ctx.translate(width / 2, height / 2);
+          ctx.rotate(180 * Math.PI / 180);
+          ctx.translate(-width / 2, -height / 2);
+          break;
+        case 4:
+          canvas.width = width;
+          canvas.height = height;
+          ctx.translate(0, height);
+          ctx.scale(1, -1);
+          break;
+        case 5:
+          canvas.height = width;
+          canvas.width = height;
+          ctx.rotate(0.5 * Math.PI);
+          ctx.scale(1, -1);
+          break;
+        case 6:
+          canvas.width = height;
+          canvas.height = width;
+          ctx.translate(height / 2, width / 2);
+          ctx.rotate(90 * Math.PI / 180);
+          ctx.translate(-width / 2, -height / 2);
+          break;
+        case 7:
+          canvas.height = width;
+          canvas.width = height;
+          ctx.rotate(0.5 * Math.PI);
+          ctx.translate(width, -height);
+          ctx.scale(-1, 1);
+          break;
+        case 8:
+          canvas.height = width;
+          canvas.width = height;
+          ctx.translate(height / 2, width / 2);
+          ctx.rotate(-90 * Math.PI / 180);
+          ctx.translate(-width / 2, -height / 2);
+          break;
+        default:
+          canvas.width = width;
+          canvas.height = height;
+      }
+      ctx.drawImage(img, 0, 0, width, height);
+      ctx.restore();
+      canvas.toBlob(
+        (blob) => {
+          let data = URL.createObjectURL(blob);
+          URL.revokeObjectURL(this.imgs);
+          this.imgs = data;
+        },
+        "image/" + this.outputType,
+        1
+      );
+    },
+    // checkout img
+    checkedImg() {
+      if (this.img === null || this.img === "") {
+        this.imgs = "";
+        this.clearCrop();
+        return;
+      }
+      this.loading = true;
+      this.scale = 1;
+      this.rotate = 0;
+      this.clearCrop();
+      let img = new Image();
+      img.onload = () => {
+        if (this.img === "") {
+          this.$emit("imgLoad", "error");
+          this.$emit("img-load", "error");
+          this.$emit("img-load", new Error("图片不能为空"));
+          return false;
+        }
+        let width = img.width;
+        let height = img.height;
+        Exif.getData(img).then((data) => {
+          this.orientation = data.orientation || 1;
+          let max = Number(this.maxImgSize);
+          if (!this.orientation && width < max & height < max) {
+            this.imgs = this.img;
+            return;
+          }
+          if (width > max) {
+            height = height / width * max;
+            width = max;
+          }
+          if (height > max) {
+            width = width / height * max;
+            height = max;
+          }
+          this.checkOrientationImage(img, this.orientation, width, height);
+        }).catch((error2) => {
+          this.$emit("img-load", "error");
+          this.$emit("img-load-error", error2);
+        });
+      };
+      img.onerror = () => {
+        this.$emit("imgLoad", "error");
+        this.$emit("img-load", "error");
+        this.$emit("img-load-error", error);
+      };
+      if (this.img.substr(0, 4) !== "data") {
+        img.crossOrigin = "";
+      }
+      if (this.isIE) {
+        var xhr = new XMLHttpRequest();
+        xhr.onload = function() {
+          var url = URL.createObjectURL(this.response);
+          img.src = url;
+        };
+        xhr.open("GET", this.img, true);
+        xhr.responseType = "blob";
+        xhr.send();
+      } else {
+        img.src = this.img;
+      }
+    },
+    // 当按下鼠标键
+    startMove(e) {
+      e.preventDefault();
+      if (this.move && !this.crop) {
+        if (!this.canMove) {
+          return false;
+        }
+        this.moveX = ("clientX" in e ? e.clientX : e.touches[0].clientX) - this.x;
+        this.moveY = ("clientY" in e ? e.clientY : e.touches[0].clientY) - this.y;
+        if (e.touches) {
+          window.addEventListener("touchmove", this.moveImg);
+          window.addEventListener("touchend", this.leaveImg);
+          if (e.touches.length == 2) {
+            this.touches = e.touches;
+            window.addEventListener("touchmove", this.touchScale);
+            window.addEventListener("touchend", this.cancelTouchScale);
+          }
+        } else {
+          window.addEventListener("mousemove", this.moveImg);
+          window.addEventListener("mouseup", this.leaveImg);
+        }
+        this.$emit("imgMoving", {
+          moving: true,
+          axis: this.getImgAxis()
+        });
+        this.$emit("img-moving", {
+          moving: true,
+          axis: this.getImgAxis()
+        });
+      } else {
+        this.cropping = true;
+        window.addEventListener("mousemove", this.createCrop);
+        window.addEventListener("mouseup", this.endCrop);
+        window.addEventListener("touchmove", this.createCrop);
+        window.addEventListener("touchend", this.endCrop);
+        this.cropOffsertX = e.offsetX ? e.offsetX : e.touches[0].pageX - this.$refs.cropper.offsetLeft;
+        this.cropOffsertY = e.offsetY ? e.offsetY : e.touches[0].pageY - this.$refs.cropper.offsetTop;
+        this.cropX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+        this.cropY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+        this.cropChangeX = this.cropOffsertX;
+        this.cropChangeY = this.cropOffsertY;
+        this.cropW = 0;
+        this.cropH = 0;
+      }
+    },
+    // 移动端缩放
+    touchScale(e) {
+      e.preventDefault();
+      let scale = this.scale;
+      var oldTouch1 = {
+        x: this.touches[0].clientX,
+        y: this.touches[0].clientY
+      };
+      var newTouch1 = {
+        x: e.touches[0].clientX,
+        y: e.touches[0].clientY
+      };
+      var oldTouch2 = {
+        x: this.touches[1].clientX,
+        y: this.touches[1].clientY
+      };
+      var newTouch2 = {
+        x: e.touches[1].clientX,
+        y: e.touches[1].clientY
+      };
+      var oldL = Math.sqrt(
+        Math.pow(oldTouch1.x - oldTouch2.x, 2) + Math.pow(oldTouch1.y - oldTouch2.y, 2)
+      );
+      var newL = Math.sqrt(
+        Math.pow(newTouch1.x - newTouch2.x, 2) + Math.pow(newTouch1.y - newTouch2.y, 2)
+      );
+      var cha = newL - oldL;
+      var coe = 1;
+      coe = coe / this.trueWidth > coe / this.trueHeight ? coe / this.trueHeight : coe / this.trueWidth;
+      coe = coe > 0.1 ? 0.1 : coe;
+      var num = coe * cha;
+      if (!this.touchNow) {
+        this.touchNow = true;
+        if (cha > 0) {
+          scale += Math.abs(num);
+        } else if (cha < 0) {
+          scale > Math.abs(num) ? scale -= Math.abs(num) : scale;
+        }
+        this.touches = e.touches;
+        setTimeout(() => {
+          this.touchNow = false;
+        }, 8);
+        if (!this.checkoutImgAxis(this.x, this.y, scale)) {
+          return false;
+        }
+        this.scale = scale;
+      }
+    },
+    cancelTouchScale(e) {
+      window.removeEventListener("touchmove", this.touchScale);
+    },
+    // 移动图片
+    moveImg(e) {
+      e.preventDefault();
+      if (e.touches && e.touches.length === 2) {
+        this.touches = e.touches;
+        window.addEventListener("touchmove", this.touchScale);
+        window.addEventListener("touchend", this.cancelTouchScale);
+        window.removeEventListener("touchmove", this.moveImg);
+        return false;
+      }
+      let nowX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+      let nowY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      let changeX, changeY;
+      changeX = nowX - this.moveX;
+      changeY = nowY - this.moveY;
+      this.$nextTick(() => {
+        if (this.centerBox) {
+          let axis = this.getImgAxis(changeX, changeY, this.scale);
+          let cropAxis = this.getCropAxis();
+          let imgW = this.trueHeight * this.scale;
+          let imgH = this.trueWidth * this.scale;
+          let maxLeft, maxTop, maxRight, maxBottom;
+          switch (this.rotate) {
+            case 1:
+            case -1:
+            case 3:
+            case -3:
+              maxLeft = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2 + (imgW - imgH) / 2;
+              maxTop = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2 + (imgH - imgW) / 2;
+              maxRight = maxLeft - imgW + this.cropW;
+              maxBottom = maxTop - imgH + this.cropH;
+              break;
+            default:
+              maxLeft = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2;
+              maxTop = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2;
+              maxRight = maxLeft - imgH + this.cropW;
+              maxBottom = maxTop - imgW + this.cropH;
+              break;
+          }
+          if (axis.x1 >= cropAxis.x1) {
+            changeX = maxLeft;
+          }
+          if (axis.y1 >= cropAxis.y1) {
+            changeY = maxTop;
+          }
+          if (axis.x2 <= cropAxis.x2) {
+            changeX = maxRight;
+          }
+          if (axis.y2 <= cropAxis.y2) {
+            changeY = maxBottom;
+          }
+        }
+        this.x = changeX;
+        this.y = changeY;
+        this.$emit("imgMoving", {
+          moving: true,
+          axis: this.getImgAxis()
+        });
+        this.$emit("img-moving", {
+          moving: true,
+          axis: this.getImgAxis()
+        });
+      });
+    },
+    // 移动图片结束
+    leaveImg(e) {
+      window.removeEventListener("mousemove", this.moveImg);
+      window.removeEventListener("touchmove", this.moveImg);
+      window.removeEventListener("mouseup", this.leaveImg);
+      window.removeEventListener("touchend", this.leaveImg);
+      this.$emit("imgMoving", {
+        moving: false,
+        axis: this.getImgAxis()
+      });
+      this.$emit("img-moving", {
+        moving: false,
+        axis: this.getImgAxis()
+      });
+    },
+    // 缩放图片
+    scaleImg() {
+      if (this.canScale) {
+        window.addEventListener(this.support, this.changeSize, this.passive);
+      }
+    },
+    // 移出框
+    cancelScale() {
+      if (this.canScale) {
+        window.removeEventListener(this.support, this.changeSize);
+      }
+    },
+    // 改变大小函数
+    changeSize(e) {
+      e.preventDefault();
+      let scale = this.scale;
+      var change = e.deltaY || e.wheelDelta;
+      var isFirefox = navigator.userAgent.indexOf("Firefox");
+      change = isFirefox > 0 ? change * 30 : change;
+      if (this.isIE) {
+        change = -change;
+      }
+      var coe = this.coe;
+      coe = coe / this.trueWidth > coe / this.trueHeight ? coe / this.trueHeight : coe / this.trueWidth;
+      var num = coe * change;
+      num < 0 ? scale += Math.abs(num) : scale > Math.abs(num) ? scale -= Math.abs(num) : scale;
+      let status = num < 0 ? "add" : "reduce";
+      if (status !== this.coeStatus) {
+        this.coeStatus = status;
+        this.coe = 0.2;
+      }
+      if (!this.scaling) {
+        this.scalingSet = setTimeout(() => {
+          this.scaling = false;
+          this.coe = this.coe += 0.01;
+        }, 50);
+      }
+      this.scaling = true;
+      if (!this.checkoutImgAxis(this.x, this.y, scale)) {
+        return false;
+      }
+      this.scale = scale;
+    },
+    // 修改图片大小函数
+    changeScale(num) {
+      let scale = this.scale;
+      num = num || 1;
+      var coe = 20;
+      coe = coe / this.trueWidth > coe / this.trueHeight ? coe / this.trueHeight : coe / this.trueWidth;
+      num = num * coe;
+      num > 0 ? scale += Math.abs(num) : scale > Math.abs(num) ? scale -= Math.abs(num) : scale;
+      if (!this.checkoutImgAxis(this.x, this.y, scale)) {
+        return false;
+      }
+      this.scale = scale;
+    },
+    // 创建截图框
+    createCrop(e) {
+      e.preventDefault();
+      var nowX = "clientX" in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;
+      var nowY = "clientY" in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;
+      this.$nextTick(() => {
+        var fw = nowX - this.cropX;
+        var fh = nowY - this.cropY;
+        if (fw > 0) {
+          this.cropW = fw + this.cropChangeX > this.w ? this.w - this.cropChangeX : fw;
+          this.cropOffsertX = this.cropChangeX;
+        } else {
+          this.cropW = this.w - this.cropChangeX + Math.abs(fw) > this.w ? this.cropChangeX : Math.abs(fw);
+          this.cropOffsertX = this.cropChangeX + fw > 0 ? this.cropChangeX + fw : 0;
+        }
+        if (!this.fixed) {
+          if (fh > 0) {
+            this.cropH = fh + this.cropChangeY > this.h ? this.h - this.cropChangeY : fh;
+            this.cropOffsertY = this.cropChangeY;
+          } else {
+            this.cropH = this.h - this.cropChangeY + Math.abs(fh) > this.h ? this.cropChangeY : Math.abs(fh);
+            this.cropOffsertY = this.cropChangeY + fh > 0 ? this.cropChangeY + fh : 0;
+          }
+        } else {
+          var fixedHeight = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
+          if (fixedHeight + this.cropOffsertY > this.h) {
+            this.cropH = this.h - this.cropOffsertY;
+            this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
+            if (fw > 0) {
+              this.cropOffsertX = this.cropChangeX;
+            } else {
+              this.cropOffsertX = this.cropChangeX - this.cropW;
+            }
+          } else {
+            this.cropH = fixedHeight;
+          }
+          this.cropOffsertY = this.cropOffsertY;
+        }
+      });
+    },
+    // 改变截图框大小
+    changeCropSize(e, w, h, typeW, typeH) {
+      e.preventDefault();
+      window.addEventListener("mousemove", this.changeCropNow);
+      window.addEventListener("mouseup", this.changeCropEnd);
+      window.addEventListener("touchmove", this.changeCropNow);
+      window.addEventListener("touchend", this.changeCropEnd);
+      this.canChangeX = w;
+      this.canChangeY = h;
+      this.changeCropTypeX = typeW;
+      this.changeCropTypeY = typeH;
+      this.cropX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+      this.cropY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      this.cropOldW = this.cropW;
+      this.cropOldH = this.cropH;
+      this.cropChangeX = this.cropOffsertX;
+      this.cropChangeY = this.cropOffsertY;
+      if (this.fixed) {
+        if (this.canChangeX && this.canChangeY) {
+          this.canChangeY = 0;
+        }
+      }
+      this.$emit("changeCropSize", {
+        width: this.cropW,
+        height: this.cropH
+      });
+      this.$emit("change-crop-size", {
+        width: this.cropW,
+        height: this.cropH
+      });
+    },
+    // 正在改变
+    changeCropNow(e) {
+      e.preventDefault();
+      var nowX = "clientX" in e ? e.clientX : e.touches ? e.touches[0].clientX : 0;
+      var nowY = "clientY" in e ? e.clientY : e.touches ? e.touches[0].clientY : 0;
+      let wrapperW = this.w;
+      let wrapperH = this.h;
+      let minX = 0;
+      let minY = 0;
+      if (this.centerBox) {
+        let axis = this.getImgAxis();
+        let imgW = axis.x2;
+        let imgH = axis.y2;
+        minX = axis.x1 > 0 ? axis.x1 : 0;
+        minY = axis.y1 > 0 ? axis.y1 : 0;
+        if (wrapperW > imgW) {
+          wrapperW = imgW;
+        }
+        if (wrapperH > imgH) {
+          wrapperH = imgH;
+        }
+      }
+      const [minCropW, minCropH] = this.checkCropLimitSize();
+      this.$nextTick(() => {
+        var fw = nowX - this.cropX;
+        var fh = nowY - this.cropY;
+        if (this.canChangeX) {
+          if (this.changeCropTypeX === 1) {
+            if (this.cropOldW - fw < minCropW) {
+              this.cropW = minCropW;
+              this.cropOffsertX = this.cropOldW + this.cropChangeX - minX - minCropW;
+            } else if (this.cropOldW - fw > 0) {
+              this.cropW = wrapperW - this.cropChangeX - fw <= wrapperW - minX ? this.cropOldW - fw : this.cropOldW + this.cropChangeX - minX;
+              this.cropOffsertX = wrapperW - this.cropChangeX - fw <= wrapperW - minX ? this.cropChangeX + fw : minX;
+            } else {
+              this.cropW = Math.abs(fw) + this.cropChangeX <= wrapperW ? Math.abs(fw) - this.cropOldW : wrapperW - this.cropOldW - this.cropChangeX;
+              this.cropOffsertX = this.cropChangeX + this.cropOldW;
+            }
+          } else if (this.changeCropTypeX === 2) {
+            if (this.cropOldW + fw < minCropW) {
+              this.cropW = minCropW;
+            } else if (this.cropOldW + fw > 0) {
+              this.cropW = this.cropOldW + fw + this.cropOffsertX <= wrapperW ? this.cropOldW + fw : wrapperW - this.cropOffsertX;
+              this.cropOffsertX = this.cropChangeX;
+            } else {
+              this.cropW = wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <= wrapperW - minX ? Math.abs(fw + this.cropOldW) : this.cropChangeX - minX;
+              this.cropOffsertX = wrapperW - this.cropChangeX + Math.abs(fw + this.cropOldW) <= wrapperW - minX ? this.cropChangeX - Math.abs(fw + this.cropOldW) : minX;
+            }
+          }
+        }
+        if (this.canChangeY) {
+          if (this.changeCropTypeY === 1) {
+            if (this.cropOldH - fh < minCropH) {
+              this.cropH = minCropH;
+              this.cropOffsertY = this.cropOldH + this.cropChangeY - minY - minCropH;
+            } else if (this.cropOldH - fh > 0) {
+              this.cropH = wrapperH - this.cropChangeY - fh <= wrapperH - minY ? this.cropOldH - fh : this.cropOldH + this.cropChangeY - minY;
+              this.cropOffsertY = wrapperH - this.cropChangeY - fh <= wrapperH - minY ? this.cropChangeY + fh : minY;
+            } else {
+              this.cropH = Math.abs(fh) + this.cropChangeY <= wrapperH ? Math.abs(fh) - this.cropOldH : wrapperH - this.cropOldH - this.cropChangeY;
+              this.cropOffsertY = this.cropChangeY + this.cropOldH;
+            }
+          } else if (this.changeCropTypeY === 2) {
+            if (this.cropOldH + fh < minCropH) {
+              this.cropH = minCropH;
+            } else if (this.cropOldH + fh > 0) {
+              this.cropH = this.cropOldH + fh + this.cropOffsertY <= wrapperH ? this.cropOldH + fh : wrapperH - this.cropOffsertY;
+              this.cropOffsertY = this.cropChangeY;
+            } else {
+              this.cropH = wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <= wrapperH - minY ? Math.abs(fh + this.cropOldH) : this.cropChangeY - minY;
+              this.cropOffsertY = wrapperH - this.cropChangeY + Math.abs(fh + this.cropOldH) <= wrapperH - minY ? this.cropChangeY - Math.abs(fh + this.cropOldH) : minY;
+            }
+          }
+        }
+        if (this.canChangeX && this.fixed) {
+          var fixedHeight = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
+          if (fixedHeight < minCropH) {
+            this.cropH = minCropH;
+            this.cropW = this.fixedNumber[0] * minCropH / this.fixedNumber[1];
+            if (this.changeCropTypeX === 1) {
+              this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW);
+            }
+          } else if (fixedHeight + this.cropOffsertY > wrapperH) {
+            this.cropH = wrapperH - this.cropOffsertY;
+            this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
+            if (this.changeCropTypeX === 1) {
+              this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW);
+            }
+          } else {
+            this.cropH = fixedHeight;
+          }
+        }
+        if (this.canChangeY && this.fixed) {
+          var fixedWidth = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
+          if (fixedWidth < minCropW) {
+            this.cropW = minCropW;
+            this.cropH = this.fixedNumber[1] * minCropW / this.fixedNumber[0];
+          } else if (fixedWidth + this.cropOffsertX > wrapperW) {
+            this.cropW = wrapperW - this.cropOffsertX;
+            this.cropH = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
+          } else {
+            this.cropW = fixedWidth;
+          }
+        }
+        this.$emit("cropSizing", { cropW: this.cropW, cropH: this.cropH });
+        this.$emit("crop-sizing", { cropW: this.cropW, cropH: this.cropH });
+      });
+    },
+    checkCropLimitSize() {
+      let { cropW, cropH, limitMinSize } = this;
+      let limitMinNum = new Array();
+      if (!Array.isArray(limitMinSize)) {
+        limitMinNum = [limitMinSize, limitMinSize];
+      } else {
+        limitMinNum = limitMinSize;
+      }
+      cropW = parseFloat(limitMinNum[0]);
+      cropH = parseFloat(limitMinNum[1]);
+      return [cropW, cropH];
+    },
+    // 结束改变
+    changeCropEnd(e) {
+      window.removeEventListener("mousemove", this.changeCropNow);
+      window.removeEventListener("mouseup", this.changeCropEnd);
+      window.removeEventListener("touchmove", this.changeCropNow);
+      window.removeEventListener("touchend", this.changeCropEnd);
+    },
+    // 根据比例x/y，最小宽度，最小高度，现有宽度，现有高度，得到应该有的宽度和高度
+    calculateSize(x, y, minX, minY, w, h) {
+      const ratio = x / y;
+      let width = w;
+      let height = h;
+      if (width < minX) {
+        width = minX;
+        height = Math.ceil(width / ratio);
+      }
+      if (height < minY) {
+        height = minY;
+        width = Math.ceil(height * ratio);
+        if (width < minX) {
+          width = minX;
+          height = Math.ceil(width / ratio);
+        }
+      }
+      if (width < w) {
+        width = w;
+        height = Math.ceil(width / ratio);
+      }
+      if (height < h) {
+        height = h;
+        width = Math.ceil(height * ratio);
+      }
+      return { width, height };
+    },
+    // 创建完成
+    endCrop() {
+      if (this.cropW === 0 && this.cropH === 0) {
+        this.cropping = false;
+      }
+      let [minCropW, minCropH] = this.checkCropLimitSize();
+      const { width, height } = this.fixed ? this.calculateSize(
+        this.fixedNumber[0],
+        this.fixedNumber[1],
+        minCropW,
+        minCropH,
+        this.cropW,
+        this.cropH
+      ) : { width: minCropW, height: minCropH };
+      if (width > this.cropW) {
+        this.cropW = width;
+        if (this.cropOffsertX + width > this.w) {
+          this.cropOffsertX = this.w - width;
+        }
+      }
+      if (height > this.cropH) {
+        this.cropH = height;
+        if (this.cropOffsertY + height > this.h) {
+          this.cropOffsertY = this.h - height;
+        }
+      }
+      window.removeEventListener("mousemove", this.createCrop);
+      window.removeEventListener("mouseup", this.endCrop);
+      window.removeEventListener("touchmove", this.createCrop);
+      window.removeEventListener("touchend", this.endCrop);
+    },
+    // 开始截图
+    startCrop() {
+      this.crop = true;
+    },
+    // 停止截图
+    stopCrop() {
+      this.crop = false;
+    },
+    // 清除截图
+    clearCrop() {
+      this.cropping = false;
+      this.cropW = 0;
+      this.cropH = 0;
+    },
+    // 截图移动
+    cropMove(e) {
+      e.preventDefault();
+      if (!this.canMoveBox) {
+        this.crop = false;
+        this.startMove(e);
+        return false;
+      }
+      if (e.touches && e.touches.length === 2) {
+        this.crop = false;
+        this.startMove(e);
+        this.leaveCrop();
+        return false;
+      }
+      window.addEventListener("mousemove", this.moveCrop);
+      window.addEventListener("mouseup", this.leaveCrop);
+      window.addEventListener("touchmove", this.moveCrop);
+      window.addEventListener("touchend", this.leaveCrop);
+      let x = "clientX" in e ? e.clientX : e.touches[0].clientX;
+      let y = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      let newX, newY;
+      newX = x - this.cropOffsertX;
+      newY = y - this.cropOffsertY;
+      this.cropX = newX;
+      this.cropY = newY;
+      this.$emit("cropMoving", {
+        moving: true,
+        axis: this.getCropAxis()
+      });
+      this.$emit("crop-moving", {
+        moving: true,
+        axis: this.getCropAxis()
+      });
+    },
+    moveCrop(e, isMove) {
+      let nowX = 0;
+      let nowY = 0;
+      if (e) {
+        e.preventDefault();
+        nowX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+        nowY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      }
+      this.$nextTick(() => {
+        let cx, cy;
+        let fw = nowX - this.cropX;
+        let fh = nowY - this.cropY;
+        if (isMove) {
+          fw = this.cropOffsertX;
+          fh = this.cropOffsertY;
+        }
+        if (fw <= 0) {
+          cx = 0;
+        } else if (fw + this.cropW > this.w) {
+          cx = this.w - this.cropW;
+        } else {
+          cx = fw;
+        }
+        if (fh <= 0) {
+          cy = 0;
+        } else if (fh + this.cropH > this.h) {
+          cy = this.h - this.cropH;
+        } else {
+          cy = fh;
+        }
+        if (this.centerBox) {
+          let axis = this.getImgAxis();
+          if (cx <= axis.x1) {
+            cx = axis.x1;
+          }
+          if (cx + this.cropW > axis.x2) {
+            cx = axis.x2 - this.cropW;
+          }
+          if (cy <= axis.y1) {
+            cy = axis.y1;
+          }
+          if (cy + this.cropH > axis.y2) {
+            cy = axis.y2 - this.cropH;
+          }
+        }
+        this.cropOffsertX = cx;
+        this.cropOffsertY = cy;
+        this.$emit("cropMoving", {
+          moving: true,
+          axis: this.getCropAxis()
+        });
+        this.$emit("crop-moving", {
+          moving: true,
+          axis: this.getCropAxis()
+        });
+      });
+    },
+    // 算出不同场景下面 图片相对于外层容器的坐标轴
+    getImgAxis(x, y, scale) {
+      x = x || this.x;
+      y = y || this.y;
+      scale = scale || this.scale;
+      let obj = {
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      };
+      let imgW = this.trueWidth * scale;
+      let imgH = this.trueHeight * scale;
+      switch (this.rotate) {
+        case 0:
+          obj.x1 = x + this.trueWidth * (1 - scale) / 2;
+          obj.x2 = obj.x1 + this.trueWidth * scale;
+          obj.y1 = y + this.trueHeight * (1 - scale) / 2;
+          obj.y2 = obj.y1 + this.trueHeight * scale;
+          break;
+        case 1:
+        case -1:
+        case 3:
+        case -3:
+          obj.x1 = x + this.trueWidth * (1 - scale) / 2 + (imgW - imgH) / 2;
+          obj.x2 = obj.x1 + this.trueHeight * scale;
+          obj.y1 = y + this.trueHeight * (1 - scale) / 2 + (imgH - imgW) / 2;
+          obj.y2 = obj.y1 + this.trueWidth * scale;
+          break;
+        default:
+          obj.x1 = x + this.trueWidth * (1 - scale) / 2;
+          obj.x2 = obj.x1 + this.trueWidth * scale;
+          obj.y1 = y + this.trueHeight * (1 - scale) / 2;
+          obj.y2 = obj.y1 + this.trueHeight * scale;
+          break;
+      }
+      return obj;
+    },
+    // 获取截图框的坐标轴
+    getCropAxis() {
+      let obj = {
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      };
+      obj.x1 = this.cropOffsertX;
+      obj.x2 = obj.x1 + this.cropW;
+      obj.y1 = this.cropOffsertY;
+      obj.y2 = obj.y1 + this.cropH;
+      return obj;
+    },
+    leaveCrop(e) {
+      window.removeEventListener("mousemove", this.moveCrop);
+      window.removeEventListener("mouseup", this.leaveCrop);
+      window.removeEventListener("touchmove", this.moveCrop);
+      window.removeEventListener("touchend", this.leaveCrop);
+      this.$emit("cropMoving", {
+        moving: false,
+        axis: this.getCropAxis()
+      });
+      this.$emit("crop-moving", {
+        moving: false,
+        axis: this.getCropAxis()
+      });
+    },
+    getCropChecked(cb) {
+      let canvas = document.createElement("canvas");
+      let img = new Image();
+      let rotate = this.rotate;
+      let trueWidth = this.trueWidth;
+      let trueHeight = this.trueHeight;
+      let cropOffsertX = this.cropOffsertX;
+      let cropOffsertY = this.cropOffsertY;
+      img.onload = () => {
+        if (this.cropW !== 0) {
+          let ctx = canvas.getContext("2d");
+          let dpr = 1;
+          if (this.high & !this.full) {
+            dpr = window.devicePixelRatio;
+          }
+          if (this.enlarge !== 1 & !this.full) {
+            dpr = Math.abs(Number(this.enlarge));
+          }
+          let width = this.cropW * dpr;
+          let height = this.cropH * dpr;
+          let imgW = trueWidth * this.scale * dpr;
+          let imgH = trueHeight * this.scale * dpr;
+          let dx = (this.x - cropOffsertX + this.trueWidth * (1 - this.scale) / 2) * dpr;
+          let dy = (this.y - cropOffsertY + this.trueHeight * (1 - this.scale) / 2) * dpr;
+          setCanvasSize(width, height);
+          ctx.save();
+          if (this.fillColor) {
+            ctx.fillStyle = this.fillColor;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+          }
+          switch (rotate) {
+            case 0:
+              if (!this.full) {
+                ctx.drawImage(img, dx, dy, imgW, imgH);
+              } else {
+                setCanvasSize(width / this.scale, height / this.scale);
+                ctx.drawImage(
+                  img,
+                  dx / this.scale,
+                  dy / this.scale,
+                  imgW / this.scale,
+                  imgH / this.scale
+                );
+              }
+              break;
+            case 1:
+            case -3:
+              if (!this.full) {
+                dx = dx + (imgW - imgH) / 2;
+                dy = dy + (imgH - imgW) / 2;
+                ctx.rotate(rotate * 90 * Math.PI / 180);
+                ctx.drawImage(img, dy, -dx - imgH, imgW, imgH);
+              } else {
+                setCanvasSize(width / this.scale, height / this.scale);
+                dx = dx / this.scale + (imgW / this.scale - imgH / this.scale) / 2;
+                dy = dy / this.scale + (imgH / this.scale - imgW / this.scale) / 2;
+                ctx.rotate(rotate * 90 * Math.PI / 180);
+                ctx.drawImage(
+                  img,
+                  dy,
+                  -dx - imgH / this.scale,
+                  imgW / this.scale,
+                  imgH / this.scale
+                );
+              }
+              break;
+            case 2:
+            case -2:
+              if (!this.full) {
+                ctx.rotate(rotate * 90 * Math.PI / 180);
+                ctx.drawImage(img, -dx - imgW, -dy - imgH, imgW, imgH);
+              } else {
+                setCanvasSize(width / this.scale, height / this.scale);
+                ctx.rotate(rotate * 90 * Math.PI / 180);
+                dx = dx / this.scale;
+                dy = dy / this.scale;
+                ctx.drawImage(
+                  img,
+                  -dx - imgW / this.scale,
+                  -dy - imgH / this.scale,
+                  imgW / this.scale,
+                  imgH / this.scale
+                );
+              }
+              break;
+            case 3:
+            case -1:
+              if (!this.full) {
+                dx = dx + (imgW - imgH) / 2;
+                dy = dy + (imgH - imgW) / 2;
+                ctx.rotate(rotate * 90 * Math.PI / 180);
+                ctx.drawImage(img, -dy - imgW, dx, imgW, imgH);
+              } else {
+                setCanvasSize(width / this.scale, height / this.scale);
+                dx = dx / this.scale + (imgW / this.scale - imgH / this.scale) / 2;
+                dy = dy / this.scale + (imgH / this.scale - imgW / this.scale) / 2;
+                ctx.rotate(rotate * 90 * Math.PI / 180);
+                ctx.drawImage(
+                  img,
+                  -dy - imgW / this.scale,
+                  dx,
+                  imgW / this.scale,
+                  imgH / this.scale
+                );
+              }
+              break;
+            default:
+              if (!this.full) {
+                ctx.drawImage(img, dx, dy, imgW, imgH);
+              } else {
+                setCanvasSize(width / this.scale, height / this.scale);
+                ctx.drawImage(
+                  img,
+                  dx / this.scale,
+                  dy / this.scale,
+                  imgW / this.scale,
+                  imgH / this.scale
+                );
+              }
+          }
+          ctx.restore();
+        } else {
+          let width = trueWidth * this.scale;
+          let height = trueHeight * this.scale;
+          let ctx = canvas.getContext("2d");
+          ctx.save();
+          if (this.fillColor) {
+            ctx.fillStyle = this.fillColor;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+          }
+          switch (rotate) {
+            case 0:
+              setCanvasSize(width, height);
+              ctx.drawImage(img, 0, 0, width, height);
+              break;
+            case 1:
+            case -3:
+              setCanvasSize(height, width);
+              ctx.rotate(rotate * 90 * Math.PI / 180);
+              ctx.drawImage(img, 0, -height, width, height);
+              break;
+            case 2:
+            case -2:
+              setCanvasSize(width, height);
+              ctx.rotate(rotate * 90 * Math.PI / 180);
+              ctx.drawImage(img, -width, -height, width, height);
+              break;
+            case 3:
+            case -1:
+              setCanvasSize(height, width);
+              ctx.rotate(rotate * 90 * Math.PI / 180);
+              ctx.drawImage(img, -width, 0, width, height);
+              break;
+            default:
+              setCanvasSize(width, height);
+              ctx.drawImage(img, 0, 0, width, height);
+          }
+          ctx.restore();
+        }
+        cb(canvas);
+      };
+      var s = this.img.substr(0, 4);
+      if (s !== "data") {
+        img.crossOrigin = "Anonymous";
+      }
+      img.src = this.imgs;
+      function setCanvasSize(width, height) {
+        canvas.width = Math.round(width);
+        canvas.height = Math.round(height);
+      }
+    },
+    // 获取转换成base64 的图片信息
+    getCropData(cb) {
+      this.getCropChecked((data) => {
+        cb(data.toDataURL("image/" + this.outputType, this.outputSize));
+      });
+    },
+    //canvas获取为blob对象
+    getCropBlob(cb) {
+      this.getCropChecked((data) => {
+        data.toBlob(
+          (blob) => cb(blob),
+          "image/" + this.outputType,
+          this.outputSize
+        );
+      });
+    },
+    // 自动预览函数
+    showPreview() {
+      if (this.isCanShow) {
+        this.isCanShow = false;
+        setTimeout(() => {
+          this.isCanShow = true;
+        }, 16);
+      } else {
+        return false;
+      }
+      let w = this.cropW;
+      let h = this.cropH;
+      let scale = this.scale;
+      var obj = {};
+      obj.div = {
+        width: `${w}px`,
+        height: `${h}px`
+      };
+      let transformX = (this.x - this.cropOffsertX) / scale;
+      let transformY = (this.y - this.cropOffsertY) / scale;
+      let transformZ = 0;
+      obj.w = w;
+      obj.h = h;
+      obj.url = this.imgs;
+      obj.img = {
+        width: `${this.trueWidth}px`,
+        height: `${this.trueHeight}px`,
+        transform: `scale(${scale})translate3d(${transformX}px, ${transformY}px, ${transformZ}px)rotateZ(${this.rotate * 90}deg)`
+      };
+      obj.html = `
+      <div class="show-preview" style="width: ${obj.w}px; height: ${obj.h}px; overflow: hidden">
+        <div style="width: ${w}px; height: ${h}px">
+          <img src=${obj.url} style="width: ${this.trueWidth}px; height: ${this.trueHeight}px; transform:
+          scale(${scale})translate3d(${transformX}px, ${transformY}px, ${transformZ}px)rotateZ(${this.rotate * 90}deg)">
+        </div>
+      </div>`;
+      this.$emit("realTime", obj);
+      this.$emit("real-time", obj);
+    },
+    // reload 图片布局函数
+    reload() {
+      let img = new Image();
+      img.onload = () => {
+        this.w = parseFloat(window.getComputedStyle(this.$refs.cropper).width);
+        this.h = parseFloat(window.getComputedStyle(this.$refs.cropper).height);
+        this.trueWidth = img.width;
+        this.trueHeight = img.height;
+        if (!this.original) {
+          this.scale = this.checkedMode();
+        } else {
+          this.scale = 1;
+        }
+        this.$nextTick(() => {
+          this.x = -(this.trueWidth - this.trueWidth * this.scale) / 2 + (this.w - this.trueWidth * this.scale) / 2;
+          this.y = -(this.trueHeight - this.trueHeight * this.scale) / 2 + (this.h - this.trueHeight * this.scale) / 2;
+          this.loading = false;
+          if (this.autoCrop) {
+            this.goAutoCrop();
+          }
+          this.$emit("img-load", "success");
+          this.$emit("imgLoad", "success");
+          setTimeout(() => {
+            this.showPreview();
+          }, 20);
+        });
+      };
+      img.onerror = () => {
+        this.$emit("imgLoad", "error");
+        this.$emit("img-load", "error");
+      };
+      img.src = this.imgs;
+    },
+    // 背景布局的函数
+    checkedMode() {
+      let scale = 1;
+      let imgW = this.trueWidth;
+      let imgH = this.trueHeight;
+      const arr = this.mode.split(" ");
+      switch (arr[0]) {
+        case "contain":
+          if (this.trueWidth > this.w) {
+            scale = this.w / this.trueWidth;
+          }
+          if (this.trueHeight * scale > this.h) {
+            scale = this.h / this.trueHeight;
+          }
+          break;
+        case "cover":
+          imgW = this.w;
+          scale = imgW / this.trueWidth;
+          imgH = imgH * scale;
+          if (imgH < this.h) {
+            imgH = this.h;
+            scale = imgH / this.trueHeight;
+          }
+          break;
+        default:
+          try {
+            let str = arr[0];
+            if (str.search("px") !== -1) {
+              str = str.replace("px", "");
+              imgW = parseFloat(str);
+              const scaleX = imgW / this.trueWidth;
+              let scaleY = 1;
+              let strH = arr[1];
+              if (strH.search("px") !== -1) {
+                strH = strH.replace("px", "");
+                imgH = parseFloat(strH);
+                scaleY = imgH / this.trueHeight;
+              }
+              scale = Math.min(scaleX, scaleY);
+            }
+            if (str.search("%") !== -1) {
+              str = str.replace("%", "");
+              imgW = parseFloat(str) / 100 * this.w;
+              scale = imgW / this.trueWidth;
+            }
+            if (arr.length === 2 && str === "auto") {
+              let str2 = arr[1];
+              if (str2.search("px") !== -1) {
+                str2 = str2.replace("px", "");
+                imgH = parseFloat(str2);
+                scale = imgH / this.trueHeight;
+              }
+              if (str2.search("%") !== -1) {
+                str2 = str2.replace("%", "");
+                imgH = parseFloat(str2) / 100 * this.h;
+                scale = imgH / this.trueHeight;
+              }
+            }
+          } catch (error2) {
+            scale = 1;
+          }
+      }
+      return scale;
+    },
+    // 自动截图函数
+    goAutoCrop(cw, ch) {
+      if (this.imgs === "" || this.imgs === null)
+        return;
+      this.clearCrop();
+      this.cropping = true;
+      let maxWidth = this.w;
+      let maxHeight = this.h;
+      if (this.centerBox) {
+        const switchWH = Math.abs(this.rotate) % 2 > 0;
+        let imgW = (switchWH ? this.trueHeight : this.trueWidth) * this.scale;
+        let imgH = (switchWH ? this.trueWidth : this.trueHeight) * this.scale;
+        maxWidth = imgW < maxWidth ? imgW : maxWidth;
+        maxHeight = imgH < maxHeight ? imgH : maxHeight;
+      }
+      var w = cw ? cw : parseFloat(this.autoCropWidth);
+      var h = ch ? ch : parseFloat(this.autoCropHeight);
+      if (w === 0 || h === 0) {
+        w = maxWidth * 0.8;
+        h = maxHeight * 0.8;
+      }
+      w = w > maxWidth ? maxWidth : w;
+      h = h > maxHeight ? maxHeight : h;
+      if (this.fixed) {
+        h = w / this.fixedNumber[0] * this.fixedNumber[1];
+      }
+      if (h > this.h) {
+        h = this.h;
+        w = h / this.fixedNumber[1] * this.fixedNumber[0];
+      }
+      this.changeCrop(w, h);
+    },
+    // 手动改变截图框大小函数
+    changeCrop(w, h) {
+      if (this.centerBox) {
+        let axis = this.getImgAxis();
+        if (w > axis.x2 - axis.x1) {
+          w = axis.x2 - axis.x1;
+          h = w / this.fixedNumber[0] * this.fixedNumber[1];
+        }
+        if (h > axis.y2 - axis.y1) {
+          h = axis.y2 - axis.y1;
+          w = h / this.fixedNumber[1] * this.fixedNumber[0];
+        }
+      }
+      this.cropW = w;
+      this.cropH = h;
+      this.checkCropLimitSize();
+      this.$nextTick(() => {
+        this.cropOffsertX = (this.w - this.cropW) / 2;
+        this.cropOffsertY = (this.h - this.cropH) / 2;
+        if (this.centerBox) {
+          this.moveCrop(null, true);
+        }
+      });
+    },
+    // 重置函数， 恢复组件置初始状态
+    refresh() {
+      this.img;
+      this.imgs = "";
+      this.scale = 1;
+      this.crop = false;
+      this.rotate = 0;
+      this.w = 0;
+      this.h = 0;
+      this.trueWidth = 0;
+      this.trueHeight = 0;
+      this.clearCrop();
+      this.$nextTick(() => {
+        this.checkedImg();
+      });
+    },
+    // 向左边旋转
+    rotateLeft() {
+      this.rotate = this.rotate <= -3 ? 0 : this.rotate - 1;
+    },
+    // 向右边旋转
+    rotateRight() {
+      this.rotate = this.rotate >= 3 ? 0 : this.rotate + 1;
+    },
+    // 清除旋转
+    rotateClear() {
+      this.rotate = 0;
+    },
+    // 图片坐标点校验
+    checkoutImgAxis(x, y, scale) {
+      x = x || this.x;
+      y = y || this.y;
+      scale = scale || this.scale;
+      let canGo = true;
+      if (this.centerBox) {
+        let axis = this.getImgAxis(x, y, scale);
+        let cropAxis = this.getCropAxis();
+        if (axis.x1 >= cropAxis.x1) {
+          canGo = false;
+        }
+        if (axis.x2 <= cropAxis.x2) {
+          canGo = false;
+        }
+        if (axis.y1 >= cropAxis.y1) {
+          canGo = false;
+        }
+        if (axis.y2 <= cropAxis.y2) {
+          canGo = false;
+        }
+      }
+      return canGo;
+    }
+  },
+  mounted() {
+    this.support = "onwheel" in document.createElement("div") ? "wheel" : document.onmousewheel !== void 0 ? "mousewheel" : "DOMMouseScroll";
+    let that = this;
+    var u = navigator.userAgent;
+    this.isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+    if (!HTMLCanvasElement.prototype.toBlob) {
+      Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
+        value: function(callback, type, quality) {
+          var binStr = atob(this.toDataURL(type, quality).split(",")[1]), len = binStr.length, arr = new Uint8Array(len);
+          for (var i = 0; i < len; i++) {
+            arr[i] = binStr.charCodeAt(i);
+          }
+          callback(new Blob([arr], { type: that.type || "image/png" }));
+        }
+      });
+    }
+    this.showPreview();
+    this.checkedImg();
+  },
+  destroyed() {
+    window.removeEventListener("mousemove", this.moveCrop);
+    window.removeEventListener("mouseup", this.leaveCrop);
+    window.removeEventListener("touchmove", this.moveCrop);
+    window.removeEventListener("touchend", this.leaveCrop);
+    this.cancelScale();
+  }
+};
+const _hoisted_1$1 = {
+  key: 0,
+  class: "cropper-box"
+};
+const _hoisted_2$1 = ["src"];
+const _hoisted_3$1 = { class: "cropper-view-box" };
+const _hoisted_4 = ["src"];
+const _hoisted_5 = { key: 1 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: "vue-cropper",
+    ref: "cropper",
+    onMouseover: _cache[28] || (_cache[28] = (...args) => $options.scaleImg && $options.scaleImg(...args)),
+    onMouseout: _cache[29] || (_cache[29] = (...args) => $options.cancelScale && $options.cancelScale(...args))
+  }, [
+    _ctx.imgs ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
+      withDirectives(createElementVNode("div", {
+        class: "cropper-box-canvas",
+        style: normalizeStyle({
+          "width": _ctx.trueWidth + "px",
+          "height": _ctx.trueHeight + "px",
+          "transform": "scale(" + _ctx.scale + "," + _ctx.scale + ") translate3d(" + _ctx.x / _ctx.scale + "px," + _ctx.y / _ctx.scale + "px,0)rotateZ(" + _ctx.rotate * 90 + "deg)"
+        })
+      }, [
+        createElementVNode("img", {
+          src: _ctx.imgs,
+          alt: "cropper-img",
+          ref: "cropperImg"
+        }, null, 8, _hoisted_2$1)
+      ], 4), [
+        [vShow, !_ctx.loading]
+      ])
+    ])) : createCommentVNode("", true),
+    createElementVNode("div", {
+      class: normalizeClass(["cropper-drag-box", { "cropper-move": _ctx.move && !_ctx.crop, "cropper-crop": _ctx.crop, "cropper-modal": _ctx.cropping }]),
+      onMousedown: _cache[0] || (_cache[0] = (...args) => $options.startMove && $options.startMove(...args)),
+      onTouchstart: _cache[1] || (_cache[1] = (...args) => $options.startMove && $options.startMove(...args))
+    }, null, 34),
+    withDirectives(createElementVNode("div", {
+      class: "cropper-crop-box",
+      style: normalizeStyle({
+        "width": _ctx.cropW + "px",
+        "height": _ctx.cropH + "px",
+        "transform": "translate3d(" + _ctx.cropOffsertX + "px," + _ctx.cropOffsertY + "px,0)"
+      })
+    }, [
+      createElementVNode("span", _hoisted_3$1, [
+        createElementVNode("img", {
+          style: normalizeStyle({
+            "width": _ctx.trueWidth + "px",
+            "height": _ctx.trueHeight + "px",
+            "transform": "scale(" + _ctx.scale + "," + _ctx.scale + ") translate3d(" + (_ctx.x - _ctx.cropOffsertX) / _ctx.scale + "px," + (_ctx.y - _ctx.cropOffsertY) / _ctx.scale + "px,0)rotateZ(" + _ctx.rotate * 90 + "deg)"
+          }),
+          src: _ctx.imgs,
+          alt: "cropper-img"
+        }, null, 12, _hoisted_4)
+      ]),
+      createElementVNode("span", {
+        class: "cropper-face cropper-move",
+        onMousedown: _cache[2] || (_cache[2] = (...args) => $options.cropMove && $options.cropMove(...args)),
+        onTouchstart: _cache[3] || (_cache[3] = (...args) => $options.cropMove && $options.cropMove(...args))
+      }, null, 32),
+      $props.info ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: "crop-info",
+        style: normalizeStyle({ "top": $options.cropInfo.top })
+      }, toDisplayString($options.cropInfo.width) + " × " + toDisplayString($options.cropInfo.height), 5)) : createCommentVNode("", true),
+      !$props.fixedBox ? (openBlock(), createElementBlock("span", _hoisted_5, [
+        createElementVNode("span", {
+          class: "crop-line line-w",
+          onMousedown: _cache[4] || (_cache[4] = ($event) => $options.changeCropSize($event, false, true, 0, 1)),
+          onTouchstart: _cache[5] || (_cache[5] = ($event) => $options.changeCropSize($event, false, true, 0, 1))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-line line-a",
+          onMousedown: _cache[6] || (_cache[6] = ($event) => $options.changeCropSize($event, true, false, 1, 0)),
+          onTouchstart: _cache[7] || (_cache[7] = ($event) => $options.changeCropSize($event, true, false, 1, 0))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-line line-s",
+          onMousedown: _cache[8] || (_cache[8] = ($event) => $options.changeCropSize($event, false, true, 0, 2)),
+          onTouchstart: _cache[9] || (_cache[9] = ($event) => $options.changeCropSize($event, false, true, 0, 2))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-line line-d",
+          onMousedown: _cache[10] || (_cache[10] = ($event) => $options.changeCropSize($event, true, false, 2, 0)),
+          onTouchstart: _cache[11] || (_cache[11] = ($event) => $options.changeCropSize($event, true, false, 2, 0))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point1",
+          onMousedown: _cache[12] || (_cache[12] = ($event) => $options.changeCropSize($event, true, true, 1, 1)),
+          onTouchstart: _cache[13] || (_cache[13] = ($event) => $options.changeCropSize($event, true, true, 1, 1))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point2",
+          onMousedown: _cache[14] || (_cache[14] = ($event) => $options.changeCropSize($event, false, true, 0, 1)),
+          onTouchstart: _cache[15] || (_cache[15] = ($event) => $options.changeCropSize($event, false, true, 0, 1))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point3",
+          onMousedown: _cache[16] || (_cache[16] = ($event) => $options.changeCropSize($event, true, true, 2, 1)),
+          onTouchstart: _cache[17] || (_cache[17] = ($event) => $options.changeCropSize($event, true, true, 2, 1))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point4",
+          onMousedown: _cache[18] || (_cache[18] = ($event) => $options.changeCropSize($event, true, false, 1, 0)),
+          onTouchstart: _cache[19] || (_cache[19] = ($event) => $options.changeCropSize($event, true, false, 1, 0))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point5",
+          onMousedown: _cache[20] || (_cache[20] = ($event) => $options.changeCropSize($event, true, false, 2, 0)),
+          onTouchstart: _cache[21] || (_cache[21] = ($event) => $options.changeCropSize($event, true, false, 2, 0))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point6",
+          onMousedown: _cache[22] || (_cache[22] = ($event) => $options.changeCropSize($event, true, true, 1, 2)),
+          onTouchstart: _cache[23] || (_cache[23] = ($event) => $options.changeCropSize($event, true, true, 1, 2))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point7",
+          onMousedown: _cache[24] || (_cache[24] = ($event) => $options.changeCropSize($event, false, true, 0, 2)),
+          onTouchstart: _cache[25] || (_cache[25] = ($event) => $options.changeCropSize($event, false, true, 0, 2))
+        }, null, 32),
+        createElementVNode("span", {
+          class: "crop-point point8",
+          onMousedown: _cache[26] || (_cache[26] = ($event) => $options.changeCropSize($event, true, true, 2, 2)),
+          onTouchstart: _cache[27] || (_cache[27] = ($event) => $options.changeCropSize($event, true, true, 2, 2))
+        }, null, 32)
+      ])) : createCommentVNode("", true)
+    ], 4), [
+      [vShow, _ctx.cropping]
+    ])
+  ], 544);
+}
+const VueCropper = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render], ["__scopeId", "data-v-168a3964"]]);
+const _hoisted_1 = { class: "h-full" };
+const _hoisted_2 = { class: "avatar-upload-preview" };
+const _hoisted_3 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "uploadAvatar",
+  props: {
+    avatar: { default: "" },
+    close: { type: Function, default: close },
+    proxyId: { default: "" }
+  },
+  setup(__props) {
+    const { postSinglefile, postUpdateFile } = useFileController();
+    const props = __props;
+    let userInfos = ref({});
+    onMounted(async () => {
+      userInfos.value = await systemStore.get("userInfo");
+    });
+    let { avatar } = toRefs(props);
+    const options = reactive({
+      img: "",
+      // 需要剪裁的图片
+      autoCrop: true,
+      // 是否默认生成截图框
+      autoCropWidth: 200,
+      // 默认生成截图框的宽度
+      autoCropHeight: 200,
+      // 默认生成截图框的长度
+      fixedBox: false,
+      // 是否固定截图框的大小 不允许改变
+      // info: true, // 裁剪框的大小信息
+      outputSize: 0.5,
+      // 裁剪生成图片的质量 [1至0.1]
+      outputType: "jpeg",
+      // 裁剪生成图片的格式
+      canScale: false,
+      // 图片是否允许滚轮缩放
+      fixed: false,
+      // 是否开启截图框宽高固定比例
+      fixedNumber: [1, 1],
+      // 截图框的宽高比例 需要配合centerBox一起使用才能生效
+      full: true,
+      // 是否输出原图比例的截图
+      canMoveBox: false,
+      // 截图框能否拖动
+      original: false,
+      // 上传图片按照原始比例渲染
+      centerBox: false,
+      // 截图框是否被限制在图片里面
+      infoTrue: true,
+      // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+      filename: ""
+      // 文件名
+    });
+    const previews = ref({});
+    const cropperRef = ref({});
+    ref(false);
+    let rotateClick = (type) => {
+      if (type == "left") {
+        cropperRef.value.rotateLeft();
+      }
+      if (type == "right") {
+        cropperRef.value.rotateRight();
+      }
+    };
+    let changeScale = (num) => {
+      const scale = num || 1;
+      cropperRef.value.changeScale(scale);
+    };
+    let refreshCrop = () => {
+      cropperRef.value.refresh();
+    };
+    const realTime = (data) => {
+      previews.value = data;
+    };
+    let requestUpload = () => {
+    };
+    let beforeUpload = (file) => {
+      let img = ["image/png", "image/jpg", "image/jpeg", "image/PNG", "image/JPG", "image/JPEG", "image/gif"];
+      if (!img.includes(file.type)) {
+        ElMessage.error("图片格式有误，请重新上传");
+        return false;
+      } else {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+          options.img = reader.result;
+          options.filename = file.name;
+        };
+      }
+    };
+    let uploadImg = () => {
+      if (!options.img) {
+        ElMessage.warning("请先选择图片");
+      }
+      cropperRef.value.getCropBlob(async (data) => {
+        const photoRes = await postSinglefile({ data: { file: data }, proxy: props.proxyId });
+        const res = await postUpdateFile({
+          data: {
+            id: userInfos.value.id,
+            attchIdArrStr: photoRes.data.id,
+            attachType: 2
+          },
+          proxy: props.proxyId
+        });
+        props.close(res);
+      });
+    };
+    onMounted(() => {
+      setTimeout(() => {
+        options.img = avatar.value;
+      }, 100);
+    });
+    return (_ctx, _cache) => {
+      const _component_el_col = resolveComponent("el-col");
+      const _component_el_row = resolveComponent("el-row");
+      const _component_bc_icon = resolveComponent("bc-icon");
+      const _component_el_button = resolveComponent("el-button");
+      const _component_hs_upload = resolveComponent("hs-upload");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_el_row, null, {
+          default: withCtx(() => [
+            createVNode(_component_el_col, {
+              xs: 24,
+              md: 13,
+              style: { height: "350px" }
+            }, {
+              default: withCtx(() => [
+                createVNode(VueCropper, {
+                  ref_key: "cropperRef",
+                  ref: cropperRef,
+                  img: options.img,
+                  info: true,
+                  infoTrue: options.infoTrue,
+                  "auto-crop": options.autoCrop,
+                  "fixed-box": options.fixedBox,
+                  fixedNumber: options.fixedNumber,
+                  fixed: options.fixed,
+                  centerBox: options.centerBox,
+                  outputType: "png",
+                  onRealTime: realTime
+                }, null, 8, ["img", "infoTrue", "auto-crop", "fixed-box", "fixedNumber", "fixed", "centerBox"])
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_col, {
+              xs: 24,
+              md: 11,
+              style: { height: "350px" }
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", _hoisted_2, [
+                  createElementVNode("img", {
+                    src: previews.value.url,
+                    style: normalizeStyle(previews.value.img)
+                  }, null, 12, _hoisted_3)
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }),
+        createVNode(_component_el_row, { class: "ptb2 py-3" }, {
+          default: withCtx(() => [
+            createVNode(_component_el_col, {
+              lg: 2,
+              md: 2
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_hs_upload, {
+                  action: "#",
+                  "http-request": unref(requestUpload),
+                  "show-file-list": false,
+                  "before-upload": unref(beforeUpload),
+                  accept: "image/*"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_button, { size: "default" }, {
+                      default: withCtx(() => [
+                        createTextVNode(" 选择 "),
+                        createVNode(_component_bc_icon, { name: "ele-UploadFilled" })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["http-request", "before-upload"])
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_col, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_button, {
+                  size: "default",
+                  icon: "ele-Plus",
+                  onClick: _cache[0] || (_cache[0] = ($event) => unref(changeScale)(1))
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_col, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_button, {
+                  size: "default",
+                  icon: "ele-Minus",
+                  onClick: _cache[1] || (_cache[1] = ($event) => unref(changeScale)(-1))
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_col, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_button, {
+                  size: "default",
+                  icon: "ele-RefreshLeft",
+                  onClick: _cache[2] || (_cache[2] = ($event) => unref(rotateClick)("left"))
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_col, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_button, {
+                  size: "default",
+                  icon: "ele-RefreshRight",
+                  onClick: _cache[3] || (_cache[3] = ($event) => unref(rotateClick)("right"))
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_col, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_button, {
+                  size: "default",
+                  onClick: _cache[4] || (_cache[4] = ($event) => unref(refreshCrop)())
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("重 置")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_el_col, {
+              lg: { span: 1, offset: 7 },
+              md: 2
+            }, {
+              default: withCtx(() => [
+                createVNode(_component_el_button, {
+                  size: "default",
+                  type: "primary",
+                  onClick: _cache[5] || (_cache[5] = ($event) => unref(uploadImg)())
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode("提 交")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+const uploadAvatar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-99513ec9"]]);
+export {
+  uploadAvatar as default
+};