hs-admin-ui 2.0.6 → 2.0.8

package/dist/uploadAvatar-uchKHW_9.mjs

@@ -0,0 +1,1336 @@
+import { openBlock as O, createElementBlock as Y, withDirectives as T, createElementVNode as w, normalizeStyle as M, vShow as k, createCommentVNode as S, normalizeClass as P, toDisplayString as A, defineComponent as R, getCurrentInstance as D, toRefs as F, reactive as U, ref as I, onMounted as j, resolveComponent as X, createVNode as v, withCtx as x, unref as y, createTextVNode as L } from "vue";
+import { _ as N, J as V } from "./index-D24SX1TC.mjs";
+const z = {};
+z.getData = (t) => new Promise((e, i) => {
+  let r = {};
+  q(t).then((o) => {
+    r.arrayBuffer = o;
+    try {
+      r.orientation = K(o);
+    } catch {
+      r.orientation = -1;
+    }
+    e(r);
+  }).catch((o) => {
+    i(o);
+  });
+});
+function q(t) {
+  let e = null;
+  return new Promise((i, r) => {
+    if (t.src)
+      if (/^data\:/i.test(t.src))
+        e = Z(t.src), i(e);
+      else if (/^blob\:/i.test(t.src)) {
+        var o = new FileReader();
+        o.onload = function(h) {
+          e = h.target.result, i(e);
+        }, G(t.src, function(h) {
+          o.readAsArrayBuffer(h);
+        });
+      } else {
+        var s = new XMLHttpRequest();
+        s.onload = function() {
+          if (this.status == 200 || this.status === 0)
+            e = s.response, i(e);
+          else
+            throw "Could not load image";
+          s = null;
+        }, s.open("GET", t.src, !0), s.responseType = "arraybuffer", s.send(null);
+      }
+    else
+      r("img error");
+  });
+}
+function G(t, e) {
+  var i = new XMLHttpRequest();
+  i.open("GET", t, !0), i.responseType = "blob", i.onload = function(r) {
+    (this.status == 200 || this.status === 0) && e(this.response);
+  }, i.send();
+}
+function Z(t, e) {
+  e = e || t.match(/^data\:([^\;]+)\;base64,/mi)[1] || "", t = t.replace(/^data\:([^\;]+)\;base64,/gmi, "");
+  for (var i = atob(t), r = i.length % 2 == 0 ? i.length : i.length + 1, o = new ArrayBuffer(r), s = new Uint16Array(o), h = 0; h < r; h++)
+    s[h] = i.charCodeAt(h);
+  return o;
+}
+function J(t, e, i) {
+  var r = "", o;
+  for (o = e, i += e; o < i; o++)
+    r += String.fromCharCode(t.getUint8(o));
+  return r;
+}
+function K(t) {
+  var e = new DataView(t), i = e.byteLength, r, o, s, h, n, c, l, a, p, u;
+  if (e.getUint8(0) === 255 && e.getUint8(1) === 216)
+    for (p = 2; p < i; ) {
+      if (e.getUint8(p) === 255 && e.getUint8(p + 1) === 225) {
+        l = p;
+        break;
+      }
+      p++;
+    }
+  if (l && (o = l + 4, s = l + 10, J(e, o, 4) === "Exif" && (c = e.getUint16(s), n = c === 18761, (n || c === 19789) && e.getUint16(s + 2, n) === 42 && (h = e.getUint32(s + 4, n), h >= 8 && (a = s + h)))), a) {
+    for (i = e.getUint16(a, n), u = 0; u < i; u++)
+      if (p = a + u * 12 + 2, e.getUint16(p, n) === 274) {
+        p += 8, r = e.getUint16(p, n);
+        break;
+      }
+  }
+  return r;
+}
+const Q = {
+  data: function() {
+    return {
+      // 容器高宽
+      w: 0,
+      h: 0,
+      // 图片缩放比例
+      scale: 1,
+      // 图片偏移x轴
+      x: 0,
+      // 图片偏移y轴
+      y: 0,
+      // 图片加载
+      loading: !0,
+      // 图片真实宽度
+      trueWidth: 0,
+      // 图片真实高度
+      trueHeight: 0,
+      move: !0,
+      // 移动的x
+      moveX: 0,
+      // 移动的y
+      moveY: 0,
+      // 开启截图
+      crop: !1,
+      // 正在截图
+      cropping: !1,
+      // 裁剪框大小
+      cropW: 0,
+      cropH: 0,
+      cropOldW: 0,
+      cropOldH: 0,
+      // 判断是否能够改变
+      canChangeX: !1,
+      canChangeY: !1,
+      // 改变的基准点
+      changeCropTypeX: 1,
+      changeCropTypeY: 1,
+      // 裁剪框的坐标轴
+      cropX: 0,
+      cropY: 0,
+      cropChangeX: 0,
+      cropChangeY: 0,
+      cropOffsertX: 0,
+      cropOffsertY: 0,
+      // 支持的滚动事件
+      support: "",
+      // 移动端手指缩放
+      touches: [],
+      touchNow: !1,
+      // 图片旋转
+      rotate: 0,
+      isIos: !1,
+      orientation: 0,
+      imgs: "",
+      // 图片缩放系数
+      coe: 0.2,
+      // 是否正在多次缩放
+      scaling: !1,
+      scalingSet: "",
+      coeStatus: "",
+      // 控制emit触发频率
+      isCanShow: !0
+    };
+  },
+  props: {
+    img: {
+      type: [String, Blob, null, File],
+      default: ""
+    },
+    // 输出图片压缩比
+    outputSize: {
+      type: Number,
+      default: 1
+    },
+    outputType: {
+      type: String,
+      default: "jpeg"
+    },
+    info: {
+      type: Boolean,
+      default: !0
+    },
+    // 是否开启滚轮放大缩小
+    canScale: {
+      type: Boolean,
+      default: !0
+    },
+    // 是否自成截图框
+    autoCrop: {
+      type: Boolean,
+      default: !1
+    },
+    autoCropWidth: {
+      type: [Number, String],
+      default: 0
+    },
+    autoCropHeight: {
+      type: [Number, String],
+      default: 0
+    },
+    // 是否开启固定宽高比
+    fixed: {
+      type: Boolean,
+      default: !1
+    },
+    // 宽高比 w/h
+    fixedNumber: {
+      type: Array,
+      default: () => [1, 1]
+    },
+    // 固定大小 禁止改变截图框大小
+    fixedBox: {
+      type: Boolean,
+      default: !1
+    },
+    // 输出截图是否缩放
+    full: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否可以拖动图片
+    canMove: {
+      type: Boolean,
+      default: !0
+    },
+    // 是否可以拖动截图框
+    canMoveBox: {
+      type: Boolean,
+      default: !0
+    },
+    // 上传图片按照原始比例显示
+    original: {
+      type: Boolean,
+      default: !1
+    },
+    // 截图框能否超过图片
+    centerBox: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否根据dpr输出高清图片
+    high: {
+      type: Boolean,
+      default: !0
+    },
+    // 截图框展示宽高类型
+    infoTrue: {
+      type: Boolean,
+      default: !1
+    },
+    // 可以压缩图片宽高  默认不超过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: () => 10,
+      validator: function(t) {
+        return Array.isArray(t) ? Number(t[0]) >= 0 && Number(t[1]) >= 0 : Number(t) >= 0;
+      }
+    },
+    // 导出时,填充背景颜色
+    fillColor: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    cropInfo() {
+      let t = {};
+      if (t.top = this.cropOffsertY > 21 ? "-21px" : "0px", t.width = this.cropW > 0 ? this.cropW : 0, t.height = this.cropH > 0 ? this.cropH : 0, this.infoTrue) {
+        let e = 1;
+        this.high && !this.full && (e = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (e = Math.abs(Number(this.enlarge))), t.width = t.width * e, t.height = t.height * e, this.full && (t.width = t.width / this.scale, t.height = t.height / this.scale);
+      }
+      return t.width = t.width.toFixed(0), t.height = t.height.toFixed(0), t;
+    },
+    isIE() {
+      return !!window.ActiveXObject || "ActiveXObject" in window;
+    },
+    passive() {
+      return this.isIE ? null : {
+        passive: !1
+      };
+    }
+  },
+  watch: {
+    // 如果图片改变， 重新布局
+    img() {
+      this.checkedImg();
+    },
+    imgs(t) {
+      t !== "" && this.reload();
+    },
+    cropW() {
+      this.showPreview();
+    },
+    cropH() {
+      this.showPreview();
+    },
+    cropOffsertX() {
+      this.showPreview();
+    },
+    cropOffsertY() {
+      this.showPreview();
+    },
+    scale(t, e) {
+      this.showPreview();
+    },
+    x() {
+      this.showPreview();
+    },
+    y() {
+      this.showPreview();
+    },
+    autoCrop(t) {
+      t && this.goAutoCrop();
+    },
+    // 修改了自动截图框
+    autoCropWidth() {
+      this.autoCrop && this.goAutoCrop();
+    },
+    autoCropHeight() {
+      this.autoCrop && this.goAutoCrop();
+    },
+    mode() {
+      this.checkedImg();
+    },
+    rotate() {
+      this.showPreview(), this.autoCrop ? this.goAutoCrop(this.cropW, this.cropH) : (this.cropW > 0 || this.cropH > 0) && this.goAutoCrop(this.cropW, this.cropH);
+    }
+  },
+  methods: {
+    getVersion(t) {
+      var e = navigator.userAgent.split(" "), i = "";
+      let r = 0;
+      const o = new RegExp(t, "i");
+      for (var s = 0; s < e.length; s++)
+        o.test(e[s]) && (i = e[s]);
+      return i ? r = i.split("/")[1].split(".") : r = ["0", "0", "0"], r;
+    },
+    checkOrientationImage(t, e, i, r) {
+      if (this.getVersion("chrome")[0] >= 81)
+        e = -1;
+      else if (this.getVersion("safari")[0] >= 605) {
+        const h = this.getVersion("version");
+        h[0] > 13 && h[1] > 1 && (e = -1);
+      } else {
+        const h = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
+        if (h) {
+          let n = h[1];
+          n = n.split("_"), (n[0] > 13 || n[0] >= 13 && n[1] >= 4) && (e = -1);
+        }
+      }
+      let o = document.createElement("canvas"), s = o.getContext("2d");
+      switch (s.save(), e) {
+        case 2:
+          o.width = i, o.height = r, s.translate(i, 0), s.scale(-1, 1);
+          break;
+        case 3:
+          o.width = i, o.height = r, s.translate(i / 2, r / 2), s.rotate(180 * Math.PI / 180), s.translate(-i / 2, -r / 2);
+          break;
+        case 4:
+          o.width = i, o.height = r, s.translate(0, r), s.scale(1, -1);
+          break;
+        case 5:
+          o.height = i, o.width = r, s.rotate(0.5 * Math.PI), s.scale(1, -1);
+          break;
+        case 6:
+          o.width = r, o.height = i, s.translate(r / 2, i / 2), s.rotate(90 * Math.PI / 180), s.translate(-i / 2, -r / 2);
+          break;
+        case 7:
+          o.height = i, o.width = r, s.rotate(0.5 * Math.PI), s.translate(i, -r), s.scale(-1, 1);
+          break;
+        case 8:
+          o.height = i, o.width = r, s.translate(r / 2, i / 2), s.rotate(-90 * Math.PI / 180), s.translate(-i / 2, -r / 2);
+          break;
+        default:
+          o.width = i, o.height = r;
+      }
+      s.drawImage(t, 0, 0, i, r), s.restore(), o.toBlob(
+        (h) => {
+          let n = URL.createObjectURL(h);
+          URL.revokeObjectURL(this.imgs), this.imgs = n;
+        },
+        "image/" + this.outputType,
+        1
+      );
+    },
+    // checkout img
+    checkedImg() {
+      if (this.img === null || this.img === "") {
+        this.imgs = "", this.clearCrop();
+        return;
+      }
+      this.loading = !0, this.scale = 1, this.rotate = 0, this.clearCrop();
+      let t = new Image();
+      if (t.onload = () => {
+        if (this.img === "")
+          return this.$emit("imgLoad", "error"), this.$emit("img-load", "error"), this.$emit("img-load", new Error("图片不能为空")), !1;
+        let i = t.width, r = t.height;
+        z.getData(t).then((o) => {
+          this.orientation = o.orientation || 1;
+          let s = Number(this.maxImgSize);
+          if (!this.orientation && i < s & r < s) {
+            this.imgs = this.img;
+            return;
+          }
+          i > s && (r = r / i * s, i = s), r > s && (i = i / r * s, r = s), this.checkOrientationImage(t, this.orientation, i, r);
+        }).catch((o) => {
+          this.$emit("img-load", "error"), this.$emit("img-load-error", o);
+        });
+      }, t.onerror = () => {
+        this.$emit("imgLoad", "error"), this.$emit("img-load", "error"), this.$emit("img-load-error", error);
+      }, this.img.substr(0, 4) !== "data" && (t.crossOrigin = ""), this.isIE) {
+        var e = new XMLHttpRequest();
+        e.onload = function() {
+          var i = URL.createObjectURL(this.response);
+          t.src = i;
+        }, e.open("GET", this.img, !0), e.responseType = "blob", e.send();
+      } else
+        t.src = this.img;
+    },
+    // 当按下鼠标键
+    startMove(t) {
+      if (t.preventDefault(), this.move && !this.crop) {
+        if (!this.canMove)
+          return !1;
+        this.moveX = ("clientX" in t ? t.clientX : t.touches[0].clientX) - this.x, this.moveY = ("clientY" in t ? t.clientY : t.touches[0].clientY) - this.y, t.touches ? (window.addEventListener("touchmove", this.moveImg), window.addEventListener("touchend", this.leaveImg), t.touches.length == 2 && (this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale))) : (window.addEventListener("mousemove", this.moveImg), window.addEventListener("mouseup", this.leaveImg)), this.$emit("imgMoving", {
+          moving: !0,
+          axis: this.getImgAxis()
+        }), this.$emit("img-moving", {
+          moving: !0,
+          axis: this.getImgAxis()
+        });
+      } else
+        this.cropping = !0, window.addEventListener("mousemove", this.createCrop), window.addEventListener("mouseup", this.endCrop), window.addEventListener("touchmove", this.createCrop), window.addEventListener("touchend", this.endCrop), this.cropOffsertX = t.offsetX ? t.offsetX : t.touches[0].pageX - this.$refs.cropper.offsetLeft, this.cropOffsertY = t.offsetY ? t.offsetY : t.touches[0].pageY - this.$refs.cropper.offsetTop, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.cropW = 0, this.cropH = 0;
+    },
+    // 移动端缩放
+    touchScale(t) {
+      t.preventDefault();
+      let e = this.scale;
+      var i = {
+        x: this.touches[0].clientX,
+        y: this.touches[0].clientY
+      }, r = {
+        x: t.touches[0].clientX,
+        y: t.touches[0].clientY
+      }, o = {
+        x: this.touches[1].clientX,
+        y: this.touches[1].clientY
+      }, s = {
+        x: t.touches[1].clientX,
+        y: t.touches[1].clientY
+      }, h = Math.sqrt(
+        Math.pow(i.x - o.x, 2) + Math.pow(i.y - o.y, 2)
+      ), n = Math.sqrt(
+        Math.pow(r.x - s.x, 2) + Math.pow(r.y - s.y, 2)
+      ), c = n - h, l = 1;
+      l = l / this.trueWidth > l / this.trueHeight ? l / this.trueHeight : l / this.trueWidth, l = l > 0.1 ? 0.1 : l;
+      var a = l * c;
+      if (!this.touchNow) {
+        if (this.touchNow = !0, c > 0 ? e += Math.abs(a) : c < 0 && e > Math.abs(a) && (e -= Math.abs(a)), this.touches = t.touches, setTimeout(() => {
+          this.touchNow = !1;
+        }, 8), !this.checkoutImgAxis(this.x, this.y, e))
+          return !1;
+        this.scale = e;
+      }
+    },
+    cancelTouchScale(t) {
+      window.removeEventListener("touchmove", this.touchScale);
+    },
+    // 移动图片
+    moveImg(t) {
+      if (t.preventDefault(), t.touches && t.touches.length === 2)
+        return this.touches = t.touches, window.addEventListener("touchmove", this.touchScale), window.addEventListener("touchend", this.cancelTouchScale), window.removeEventListener("touchmove", this.moveImg), !1;
+      let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, r, o;
+      r = e - this.moveX, o = i - this.moveY, this.$nextTick(() => {
+        if (this.centerBox) {
+          let s = this.getImgAxis(r, o, this.scale), h = this.getCropAxis(), n = this.trueHeight * this.scale, c = this.trueWidth * this.scale, l, a, p, u;
+          switch (this.rotate) {
+            case 1:
+            case -1:
+            case 3:
+            case -3:
+              l = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2 + (n - c) / 2, a = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2 + (c - n) / 2, p = l - n + this.cropW, u = a - c + this.cropH;
+              break;
+            default:
+              l = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2, a = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2, p = l - c + this.cropW, u = a - n + this.cropH;
+              break;
+          }
+          s.x1 >= h.x1 && (r = l), s.y1 >= h.y1 && (o = a), s.x2 <= h.x2 && (r = p), s.y2 <= h.y2 && (o = u);
+        }
+        this.x = r, this.y = o, this.$emit("imgMoving", {
+          moving: !0,
+          axis: this.getImgAxis()
+        }), this.$emit("img-moving", {
+          moving: !0,
+          axis: this.getImgAxis()
+        });
+      });
+    },
+    // 移动图片结束
+    leaveImg(t) {
+      window.removeEventListener("mousemove", this.moveImg), window.removeEventListener("touchmove", this.moveImg), window.removeEventListener("mouseup", this.leaveImg), window.removeEventListener("touchend", this.leaveImg), this.$emit("imgMoving", {
+        moving: !1,
+        axis: this.getImgAxis()
+      }), this.$emit("img-moving", {
+        moving: !1,
+        axis: this.getImgAxis()
+      });
+    },
+    // 缩放图片
+    scaleImg() {
+      this.canScale && window.addEventListener(this.support, this.changeSize, this.passive);
+    },
+    // 移出框
+    cancelScale() {
+      this.canScale && window.removeEventListener(this.support, this.changeSize);
+    },
+    // 改变大小函数
+    changeSize(t) {
+      t.preventDefault();
+      let e = this.scale;
+      var i = t.deltaY || t.wheelDelta, r = navigator.userAgent.indexOf("Firefox");
+      i = r > 0 ? i * 30 : i, this.isIE && (i = -i);
+      var o = this.coe;
+      o = o / this.trueWidth > o / this.trueHeight ? o / this.trueHeight : o / this.trueWidth;
+      var s = o * i;
+      s < 0 ? e += Math.abs(s) : e > Math.abs(s) && (e -= Math.abs(s));
+      let h = s < 0 ? "add" : "reduce";
+      if (h !== this.coeStatus && (this.coeStatus = h, this.coe = 0.2), this.scaling || (this.scalingSet = setTimeout(() => {
+        this.scaling = !1, this.coe = this.coe += 0.01;
+      }, 50)), this.scaling = !0, !this.checkoutImgAxis(this.x, this.y, e))
+        return !1;
+      this.scale = e;
+    },
+    // 修改图片大小函数
+    changeScale(t) {
+      let e = this.scale;
+      t = t || 1;
+      var i = 20;
+      if (i = i / this.trueWidth > i / this.trueHeight ? i / this.trueHeight : i / this.trueWidth, t = t * i, t > 0 ? e += Math.abs(t) : e > Math.abs(t) && (e -= Math.abs(t)), !this.checkoutImgAxis(this.x, this.y, e))
+        return !1;
+      this.scale = e;
+    },
+    // 创建截图框
+    createCrop(t) {
+      t.preventDefault();
+      var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
+      this.$nextTick(() => {
+        var r = e - this.cropX, o = i - this.cropY;
+        if (r > 0 ? (this.cropW = r + this.cropChangeX > this.w ? this.w - this.cropChangeX : r, this.cropOffsertX = this.cropChangeX) : (this.cropW = this.w - this.cropChangeX + Math.abs(r) > this.w ? this.cropChangeX : Math.abs(r), this.cropOffsertX = this.cropChangeX + r > 0 ? this.cropChangeX + r : 0), !this.fixed)
+          o > 0 ? (this.cropH = o + this.cropChangeY > this.h ? this.h - this.cropChangeY : o, this.cropOffsertY = this.cropChangeY) : (this.cropH = this.h - this.cropChangeY + Math.abs(o) > this.h ? this.cropChangeY : Math.abs(o), this.cropOffsertY = this.cropChangeY + o > 0 ? this.cropChangeY + o : 0);
+        else {
+          var s = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
+          s + this.cropOffsertY > this.h ? (this.cropH = this.h - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], r > 0 ? this.cropOffsertX = this.cropChangeX : this.cropOffsertX = this.cropChangeX - this.cropW) : this.cropH = s, this.cropOffsertY = this.cropOffsertY;
+        }
+      });
+    },
+    // 改变截图框大小
+    changeCropSize(t, e, i, r, o) {
+      t.preventDefault(), window.addEventListener("mousemove", this.changeCropNow), window.addEventListener("mouseup", this.changeCropEnd), window.addEventListener("touchmove", this.changeCropNow), window.addEventListener("touchend", this.changeCropEnd), this.canChangeX = e, this.canChangeY = i, this.changeCropTypeX = r, this.changeCropTypeY = o, this.cropX = "clientX" in t ? t.clientX : t.touches[0].clientX, this.cropY = "clientY" in t ? t.clientY : t.touches[0].clientY, this.cropOldW = this.cropW, this.cropOldH = this.cropH, this.cropChangeX = this.cropOffsertX, this.cropChangeY = this.cropOffsertY, this.fixed && 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(t) {
+      t.preventDefault();
+      var e = "clientX" in t ? t.clientX : t.touches ? t.touches[0].clientX : 0, i = "clientY" in t ? t.clientY : t.touches ? t.touches[0].clientY : 0;
+      let r = this.w, o = this.h, s = 0, h = 0;
+      if (this.centerBox) {
+        let l = this.getImgAxis(), a = l.x2, p = l.y2;
+        s = l.x1 > 0 ? l.x1 : 0, h = l.y1 > 0 ? l.y1 : 0, r > a && (r = a), o > p && (o = p);
+      }
+      const [n, c] = this.checkCropLimitSize();
+      this.$nextTick(() => {
+        var l = e - this.cropX, a = i - this.cropY;
+        if (this.canChangeX && (this.changeCropTypeX === 1 ? this.cropOldW - l < n ? (this.cropW = n, this.cropOffsertX = this.cropOldW + this.cropChangeX - s - n) : this.cropOldW - l > 0 ? (this.cropW = r - this.cropChangeX - l <= r - s ? this.cropOldW - l : this.cropOldW + this.cropChangeX - s, this.cropOffsertX = r - this.cropChangeX - l <= r - s ? this.cropChangeX + l : s) : (this.cropW = Math.abs(l) + this.cropChangeX <= r ? Math.abs(l) - this.cropOldW : r - this.cropOldW - this.cropChangeX, this.cropOffsertX = this.cropChangeX + this.cropOldW) : this.changeCropTypeX === 2 && (this.cropOldW + l < n ? this.cropW = n : this.cropOldW + l > 0 ? (this.cropW = this.cropOldW + l + this.cropOffsertX <= r ? this.cropOldW + l : r - this.cropOffsertX, this.cropOffsertX = this.cropChangeX) : (this.cropW = r - this.cropChangeX + Math.abs(l + this.cropOldW) <= r - s ? Math.abs(l + this.cropOldW) : this.cropChangeX - s, this.cropOffsertX = r - this.cropChangeX + Math.abs(l + this.cropOldW) <= r - s ? this.cropChangeX - Math.abs(l + this.cropOldW) : s))), this.canChangeY && (this.changeCropTypeY === 1 ? this.cropOldH - a < c ? (this.cropH = c, this.cropOffsertY = this.cropOldH + this.cropChangeY - h - c) : this.cropOldH - a > 0 ? (this.cropH = o - this.cropChangeY - a <= o - h ? this.cropOldH - a : this.cropOldH + this.cropChangeY - h, this.cropOffsertY = o - this.cropChangeY - a <= o - h ? this.cropChangeY + a : h) : (this.cropH = Math.abs(a) + this.cropChangeY <= o ? Math.abs(a) - this.cropOldH : o - this.cropOldH - this.cropChangeY, this.cropOffsertY = this.cropChangeY + this.cropOldH) : this.changeCropTypeY === 2 && (this.cropOldH + a < c ? this.cropH = c : this.cropOldH + a > 0 ? (this.cropH = this.cropOldH + a + this.cropOffsertY <= o ? this.cropOldH + a : o - this.cropOffsertY, this.cropOffsertY = this.cropChangeY) : (this.cropH = o - this.cropChangeY + Math.abs(a + this.cropOldH) <= o - h ? Math.abs(a + this.cropOldH) : this.cropChangeY - h, this.cropOffsertY = o - this.cropChangeY + Math.abs(a + this.cropOldH) <= o - h ? this.cropChangeY - Math.abs(a + this.cropOldH) : h))), this.canChangeX && this.fixed) {
+          var p = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
+          p < c ? (this.cropH = c, this.cropW = this.fixedNumber[0] * c / this.fixedNumber[1], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : p + this.cropOffsertY > o ? (this.cropH = o - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : this.cropH = p;
+        }
+        if (this.canChangeY && this.fixed) {
+          var u = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
+          u < n ? (this.cropW = n, this.cropH = this.fixedNumber[1] * n / this.fixedNumber[0]) : u + this.cropOffsertX > r ? (this.cropW = r - this.cropOffsertX, this.cropH = this.cropW / this.fixedNumber[0] * this.fixedNumber[1]) : this.cropW = u;
+        }
+        this.$emit("cropSizing", { cropW: this.cropW, cropH: this.cropH }), this.$emit("crop-sizing", { cropW: this.cropW, cropH: this.cropH });
+      });
+    },
+    checkCropLimitSize() {
+      let { cropW: t, cropH: e, limitMinSize: i } = this, r = new Array();
+      return Array.isArray(i) ? r = i : r = [i, i], t = parseFloat(r[0]), e = parseFloat(r[1]), [t, e];
+    },
+    // 结束改变
+    changeCropEnd(t) {
+      window.removeEventListener("mousemove", this.changeCropNow), window.removeEventListener("mouseup", this.changeCropEnd), window.removeEventListener("touchmove", this.changeCropNow), window.removeEventListener("touchend", this.changeCropEnd);
+    },
+    // 根据比例x/y，最小宽度，最小高度，现有宽度，现有高度，得到应该有的宽度和高度
+    calculateSize(t, e, i, r, o, s) {
+      const h = t / e;
+      let n = o, c = s;
+      return n < i && (n = i, c = Math.ceil(n / h)), c < r && (c = r, n = Math.ceil(c * h), n < i && (n = i, c = Math.ceil(n / h))), n < o && (n = o, c = Math.ceil(n / h)), c < s && (c = s, n = Math.ceil(c * h)), { width: n, height: c };
+    },
+    // 创建完成
+    endCrop() {
+      this.cropW === 0 && this.cropH === 0 && (this.cropping = !1);
+      let [t, e] = this.checkCropLimitSize();
+      const { width: i, height: r } = this.fixed ? this.calculateSize(
+        this.fixedNumber[0],
+        this.fixedNumber[1],
+        t,
+        e,
+        this.cropW,
+        this.cropH
+      ) : { width: t, height: e };
+      i > this.cropW && (this.cropW = i, this.cropOffsertX + i > this.w && (this.cropOffsertX = this.w - i)), r > this.cropH && (this.cropH = r, this.cropOffsertY + r > this.h && (this.cropOffsertY = this.h - r)), window.removeEventListener("mousemove", this.createCrop), window.removeEventListener("mouseup", this.endCrop), window.removeEventListener("touchmove", this.createCrop), window.removeEventListener("touchend", this.endCrop);
+    },
+    // 开始截图
+    startCrop() {
+      this.crop = !0;
+    },
+    // 停止截图
+    stopCrop() {
+      this.crop = !1;
+    },
+    // 清除截图
+    clearCrop() {
+      this.cropping = !1, this.cropW = 0, this.cropH = 0;
+    },
+    // 截图移动
+    cropMove(t) {
+      if (t.preventDefault(), !this.canMoveBox)
+        return this.crop = !1, this.startMove(t), !1;
+      if (t.touches && t.touches.length === 2)
+        return this.crop = !1, this.startMove(t), this.leaveCrop(), !1;
+      window.addEventListener("mousemove", this.moveCrop), window.addEventListener("mouseup", this.leaveCrop), window.addEventListener("touchmove", this.moveCrop), window.addEventListener("touchend", this.leaveCrop);
+      let e = "clientX" in t ? t.clientX : t.touches[0].clientX, i = "clientY" in t ? t.clientY : t.touches[0].clientY, r, o;
+      r = e - this.cropOffsertX, o = i - this.cropOffsertY, this.cropX = r, this.cropY = o, this.$emit("cropMoving", {
+        moving: !0,
+        axis: this.getCropAxis()
+      }), this.$emit("crop-moving", {
+        moving: !0,
+        axis: this.getCropAxis()
+      });
+    },
+    moveCrop(t, e) {
+      let i = 0, r = 0;
+      t && (t.preventDefault(), i = "clientX" in t ? t.clientX : t.touches[0].clientX, r = "clientY" in t ? t.clientY : t.touches[0].clientY), this.$nextTick(() => {
+        let o, s, h = i - this.cropX, n = r - this.cropY;
+        if (e && (h = this.cropOffsertX, n = this.cropOffsertY), h <= 0 ? o = 0 : h + this.cropW > this.w ? o = this.w - this.cropW : o = h, n <= 0 ? s = 0 : n + this.cropH > this.h ? s = this.h - this.cropH : s = n, this.centerBox) {
+          let c = this.getImgAxis();
+          o <= c.x1 && (o = c.x1), o + this.cropW > c.x2 && (o = c.x2 - this.cropW), s <= c.y1 && (s = c.y1), s + this.cropH > c.y2 && (s = c.y2 - this.cropH);
+        }
+        this.cropOffsertX = o, this.cropOffsertY = s, this.$emit("cropMoving", {
+          moving: !0,
+          axis: this.getCropAxis()
+        }), this.$emit("crop-moving", {
+          moving: !0,
+          axis: this.getCropAxis()
+        });
+      });
+    },
+    // 算出不同场景下面 图片相对于外层容器的坐标轴
+    getImgAxis(t, e, i) {
+      t = t || this.x, e = e || this.y, i = i || this.scale;
+      let r = {
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      }, o = this.trueWidth * i, s = this.trueHeight * i;
+      switch (this.rotate) {
+        case 0:
+          r.x1 = t + this.trueWidth * (1 - i) / 2, r.x2 = r.x1 + this.trueWidth * i, r.y1 = e + this.trueHeight * (1 - i) / 2, r.y2 = r.y1 + this.trueHeight * i;
+          break;
+        case 1:
+        case -1:
+        case 3:
+        case -3:
+          r.x1 = t + this.trueWidth * (1 - i) / 2 + (o - s) / 2, r.x2 = r.x1 + this.trueHeight * i, r.y1 = e + this.trueHeight * (1 - i) / 2 + (s - o) / 2, r.y2 = r.y1 + this.trueWidth * i;
+          break;
+        default:
+          r.x1 = t + this.trueWidth * (1 - i) / 2, r.x2 = r.x1 + this.trueWidth * i, r.y1 = e + this.trueHeight * (1 - i) / 2, r.y2 = r.y1 + this.trueHeight * i;
+          break;
+      }
+      return r;
+    },
+    // 获取截图框的坐标轴
+    getCropAxis() {
+      let t = {
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      };
+      return t.x1 = this.cropOffsertX, t.x2 = t.x1 + this.cropW, t.y1 = this.cropOffsertY, t.y2 = t.y1 + this.cropH, t;
+    },
+    leaveCrop(t) {
+      window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.$emit("cropMoving", {
+        moving: !1,
+        axis: this.getCropAxis()
+      }), this.$emit("crop-moving", {
+        moving: !1,
+        axis: this.getCropAxis()
+      });
+    },
+    getCropChecked(t) {
+      let e = document.createElement("canvas"), i = new Image(), r = this.rotate, o = this.trueWidth, s = this.trueHeight, h = this.cropOffsertX, n = this.cropOffsertY;
+      i.onload = () => {
+        if (this.cropW !== 0) {
+          let a = e.getContext("2d"), p = 1;
+          this.high & !this.full && (p = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (p = Math.abs(Number(this.enlarge)));
+          let u = this.cropW * p, b = this.cropH * p, g = o * this.scale * p, m = s * this.scale * p, d = (this.x - h + this.trueWidth * (1 - this.scale) / 2) * p, f = (this.y - n + this.trueHeight * (1 - this.scale) / 2) * p;
+          switch (l(u, b), a.save(), this.fillColor && (a.fillStyle = this.fillColor, a.fillRect(0, 0, e.width, e.height)), r) {
+            case 0:
+              this.full ? (l(u / this.scale, b / this.scale), a.drawImage(
+                i,
+                d / this.scale,
+                f / this.scale,
+                g / this.scale,
+                m / this.scale
+              )) : a.drawImage(i, d, f, g, m);
+              break;
+            case 1:
+            case -3:
+              this.full ? (l(u / this.scale, b / this.scale), d = d / this.scale + (g / this.scale - m / this.scale) / 2, f = f / this.scale + (m / this.scale - g / this.scale) / 2, a.rotate(r * 90 * Math.PI / 180), a.drawImage(
+                i,
+                f,
+                -d - m / this.scale,
+                g / this.scale,
+                m / this.scale
+              )) : (d = d + (g - m) / 2, f = f + (m - g) / 2, a.rotate(r * 90 * Math.PI / 180), a.drawImage(i, f, -d - m, g, m));
+              break;
+            case 2:
+            case -2:
+              this.full ? (l(u / this.scale, b / this.scale), a.rotate(r * 90 * Math.PI / 180), d = d / this.scale, f = f / this.scale, a.drawImage(
+                i,
+                -d - g / this.scale,
+                -f - m / this.scale,
+                g / this.scale,
+                m / this.scale
+              )) : (a.rotate(r * 90 * Math.PI / 180), a.drawImage(i, -d - g, -f - m, g, m));
+              break;
+            case 3:
+            case -1:
+              this.full ? (l(u / this.scale, b / this.scale), d = d / this.scale + (g / this.scale - m / this.scale) / 2, f = f / this.scale + (m / this.scale - g / this.scale) / 2, a.rotate(r * 90 * Math.PI / 180), a.drawImage(
+                i,
+                -f - g / this.scale,
+                d,
+                g / this.scale,
+                m / this.scale
+              )) : (d = d + (g - m) / 2, f = f + (m - g) / 2, a.rotate(r * 90 * Math.PI / 180), a.drawImage(i, -f - g, d, g, m));
+              break;
+            default:
+              this.full ? (l(u / this.scale, b / this.scale), a.drawImage(
+                i,
+                d / this.scale,
+                f / this.scale,
+                g / this.scale,
+                m / this.scale
+              )) : a.drawImage(i, d, f, g, m);
+          }
+          a.restore();
+        } else {
+          let a = o * this.scale, p = s * this.scale, u = e.getContext("2d");
+          switch (u.save(), this.fillColor && (u.fillStyle = this.fillColor, u.fillRect(0, 0, e.width, e.height)), r) {
+            case 0:
+              l(a, p), u.drawImage(i, 0, 0, a, p);
+              break;
+            case 1:
+            case -3:
+              l(p, a), u.rotate(r * 90 * Math.PI / 180), u.drawImage(i, 0, -p, a, p);
+              break;
+            case 2:
+            case -2:
+              l(a, p), u.rotate(r * 90 * Math.PI / 180), u.drawImage(i, -a, -p, a, p);
+              break;
+            case 3:
+            case -1:
+              l(p, a), u.rotate(r * 90 * Math.PI / 180), u.drawImage(i, -a, 0, a, p);
+              break;
+            default:
+              l(a, p), u.drawImage(i, 0, 0, a, p);
+          }
+          u.restore();
+        }
+        t(e);
+      };
+      var c = this.img.substr(0, 4);
+      c !== "data" && (i.crossOrigin = "Anonymous"), i.src = this.imgs;
+      function l(a, p) {
+        e.width = Math.round(a), e.height = Math.round(p);
+      }
+    },
+    // 获取转换成base64 的图片信息
+    getCropData(t) {
+      this.getCropChecked((e) => {
+        t(e.toDataURL("image/" + this.outputType, this.outputSize));
+      });
+    },
+    //canvas获取为blob对象
+    getCropBlob(t) {
+      this.getCropChecked((e) => {
+        e.toBlob(
+          (i) => t(i),
+          "image/" + this.outputType,
+          this.outputSize
+        );
+      });
+    },
+    // 自动预览函数
+    showPreview() {
+      if (this.isCanShow)
+        this.isCanShow = !1, setTimeout(() => {
+          this.isCanShow = !0;
+        }, 16);
+      else
+        return !1;
+      let t = this.cropW, e = this.cropH, i = this.scale;
+      var r = {};
+      r.div = {
+        width: `${t}px`,
+        height: `${e}px`
+      };
+      let o = (this.x - this.cropOffsertX) / i, s = (this.y - this.cropOffsertY) / i, h = 0;
+      r.w = t, r.h = e, r.url = this.imgs, r.img = {
+        width: `${this.trueWidth}px`,
+        height: `${this.trueHeight}px`,
+        transform: `scale(${i})translate3d(${o}px, ${s}px, ${h}px)rotateZ(${this.rotate * 90}deg)`
+      }, r.html = `
+      <div class="show-preview" style="width: ${r.w}px; height: ${r.h}px; overflow: hidden">
+        <div style="width: ${t}px; height: ${e}px">
+          <img src=${r.url} style="width: ${this.trueWidth}px; height: ${this.trueHeight}px; transform:
+          scale(${i})translate3d(${o}px, ${s}px, ${h}px)rotateZ(${this.rotate * 90}deg)">
+        </div>
+      </div>`, this.$emit("realTime", r), this.$emit("real-time", r);
+    },
+    // reload 图片布局函数
+    reload() {
+      let t = new Image();
+      t.onload = () => {
+        this.w = parseFloat(window.getComputedStyle(this.$refs.cropper).width), this.h = parseFloat(window.getComputedStyle(this.$refs.cropper).height), this.trueWidth = t.width, this.trueHeight = t.height, this.original ? this.scale = 1 : this.scale = this.checkedMode(), 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 = !1, this.autoCrop && this.goAutoCrop(), this.$emit("img-load", "success"), this.$emit("imgLoad", "success"), setTimeout(() => {
+            this.showPreview();
+          }, 20);
+        });
+      }, t.onerror = () => {
+        this.$emit("imgLoad", "error"), this.$emit("img-load", "error");
+      }, t.src = this.imgs;
+    },
+    // 背景布局的函数
+    checkedMode() {
+      let t = 1, e = this.trueWidth, i = this.trueHeight;
+      const r = this.mode.split(" ");
+      switch (r[0]) {
+        case "contain":
+          this.trueWidth > this.w && (t = this.w / this.trueWidth), this.trueHeight * t > this.h && (t = this.h / this.trueHeight);
+          break;
+        case "cover":
+          e = this.w, t = e / this.trueWidth, i = i * t, i < this.h && (i = this.h, t = i / this.trueHeight);
+          break;
+        default:
+          try {
+            let o = r[0];
+            if (o.search("px") !== -1) {
+              o = o.replace("px", ""), e = parseFloat(o);
+              const s = e / this.trueWidth;
+              let h = 1, n = r[1];
+              n.search("px") !== -1 && (n = n.replace("px", ""), i = parseFloat(n), h = i / this.trueHeight), t = Math.min(s, h);
+            }
+            if (o.search("%") !== -1 && (o = o.replace("%", ""), e = parseFloat(o) / 100 * this.w, t = e / this.trueWidth), r.length === 2 && o === "auto") {
+              let s = r[1];
+              s.search("px") !== -1 && (s = s.replace("px", ""), i = parseFloat(s), t = i / this.trueHeight), s.search("%") !== -1 && (s = s.replace("%", ""), i = parseFloat(s) / 100 * this.h, t = i / this.trueHeight);
+            }
+          } catch {
+            t = 1;
+          }
+      }
+      return t;
+    },
+    // 自动截图函数
+    goAutoCrop(t, e) {
+      if (this.imgs === "" || this.imgs === null)
+        return;
+      this.clearCrop(), this.cropping = !0;
+      let i = this.w, r = this.h;
+      if (this.centerBox) {
+        const h = Math.abs(this.rotate) % 2 > 0;
+        let n = (h ? this.trueHeight : this.trueWidth) * this.scale, c = (h ? this.trueWidth : this.trueHeight) * this.scale;
+        i = n < i ? n : i, r = c < r ? c : r;
+      }
+      var o = t || parseFloat(this.autoCropWidth), s = e || parseFloat(this.autoCropHeight);
+      (o === 0 || s === 0) && (o = i * 0.8, s = r * 0.8), o = o > i ? i : o, s = s > r ? r : s, this.fixed && (s = o / this.fixedNumber[0] * this.fixedNumber[1]), s > this.h && (s = this.h, o = s / this.fixedNumber[1] * this.fixedNumber[0]), this.changeCrop(o, s);
+    },
+    // 手动改变截图框大小函数
+    changeCrop(t, e) {
+      if (this.centerBox) {
+        let i = this.getImgAxis();
+        t > i.x2 - i.x1 && (t = i.x2 - i.x1, e = t / this.fixedNumber[0] * this.fixedNumber[1]), e > i.y2 - i.y1 && (e = i.y2 - i.y1, t = e / this.fixedNumber[1] * this.fixedNumber[0]);
+      }
+      this.cropW = t, this.cropH = e, this.checkCropLimitSize(), this.$nextTick(() => {
+        this.cropOffsertX = (this.w - this.cropW) / 2, this.cropOffsertY = (this.h - this.cropH) / 2, this.centerBox && this.moveCrop(null, !0);
+      });
+    },
+    // 重置函数， 恢复组件置初始状态
+    refresh() {
+      this.img, this.imgs = "", this.scale = 1, this.crop = !1, 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(t, e, i) {
+      t = t || this.x, e = e || this.y, i = i || this.scale;
+      let r = !0;
+      if (this.centerBox) {
+        let o = this.getImgAxis(t, e, i), s = this.getCropAxis();
+        o.x1 >= s.x1 && (r = !1), o.x2 <= s.x2 && (r = !1), o.y1 >= s.y1 && (r = !1), o.y2 <= s.y2 && (r = !1);
+      }
+      return r;
+    }
+  },
+  mounted() {
+    this.support = "onwheel" in document.createElement("div") ? "wheel" : document.onmousewheel !== void 0 ? "mousewheel" : "DOMMouseScroll";
+    let t = this;
+    var e = navigator.userAgent;
+    this.isIOS = !!e.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), HTMLCanvasElement.prototype.toBlob || Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
+      value: function(i, r, o) {
+        for (var s = atob(this.toDataURL(r, o).split(",")[1]), h = s.length, n = new Uint8Array(h), c = 0; c < h; c++)
+          n[c] = s.charCodeAt(c);
+        i(new Blob([n], { type: t.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();
+  }
+}, _ = {
+  key: 0,
+  class: "cropper-box"
+}, tt = ["src"], et = { class: "cropper-view-box" }, it = ["src"], st = { key: 1 };
+function rt(t, e, i, r, o, s) {
+  return O(), Y("div", {
+    class: "vue-cropper",
+    ref: "cropper",
+    onMouseover: e[28] || (e[28] = (...h) => s.scaleImg && s.scaleImg(...h)),
+    onMouseout: e[29] || (e[29] = (...h) => s.cancelScale && s.cancelScale(...h))
+  }, [
+    t.imgs ? (O(), Y("div", _, [
+      T(w("div", {
+        class: "cropper-box-canvas",
+        style: M({
+          width: t.trueWidth + "px",
+          height: t.trueHeight + "px",
+          transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + t.x / t.scale + "px," + t.y / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
+        })
+      }, [
+        w("img", {
+          src: t.imgs,
+          alt: "cropper-img",
+          ref: "cropperImg"
+        }, null, 8, tt)
+      ], 4), [
+        [k, !t.loading]
+      ])
+    ])) : S("", !0),
+    w("div", {
+      class: P(["cropper-drag-box", { "cropper-move": t.move && !t.crop, "cropper-crop": t.crop, "cropper-modal": t.cropping }]),
+      onMousedown: e[0] || (e[0] = (...h) => s.startMove && s.startMove(...h)),
+      onTouchstart: e[1] || (e[1] = (...h) => s.startMove && s.startMove(...h))
+    }, null, 34),
+    T(w("div", {
+      class: "cropper-crop-box",
+      style: M({
+        width: t.cropW + "px",
+        height: t.cropH + "px",
+        transform: "translate3d(" + t.cropOffsertX + "px," + t.cropOffsertY + "px,0)"
+      })
+    }, [
+      w("span", et, [
+        w("img", {
+          style: M({
+            width: t.trueWidth + "px",
+            height: t.trueHeight + "px",
+            transform: "scale(" + t.scale + "," + t.scale + ") translate3d(" + (t.x - t.cropOffsertX) / t.scale + "px," + (t.y - t.cropOffsertY) / t.scale + "px,0)rotateZ(" + t.rotate * 90 + "deg)"
+          }),
+          src: t.imgs,
+          alt: "cropper-img"
+        }, null, 12, it)
+      ]),
+      w("span", {
+        class: "cropper-face cropper-move",
+        onMousedown: e[2] || (e[2] = (...h) => s.cropMove && s.cropMove(...h)),
+        onTouchstart: e[3] || (e[3] = (...h) => s.cropMove && s.cropMove(...h))
+      }, null, 32),
+      i.info ? (O(), Y("span", {
+        key: 0,
+        class: "crop-info",
+        style: M({ top: s.cropInfo.top })
+      }, A(s.cropInfo.width) + " × " + A(s.cropInfo.height), 5)) : S("", !0),
+      i.fixedBox ? S("", !0) : (O(), Y("span", st, [
+        w("span", {
+          class: "crop-line line-w",
+          onMousedown: e[4] || (e[4] = (h) => s.changeCropSize(h, !1, !0, 0, 1)),
+          onTouchstart: e[5] || (e[5] = (h) => s.changeCropSize(h, !1, !0, 0, 1))
+        }, null, 32),
+        w("span", {
+          class: "crop-line line-a",
+          onMousedown: e[6] || (e[6] = (h) => s.changeCropSize(h, !0, !1, 1, 0)),
+          onTouchstart: e[7] || (e[7] = (h) => s.changeCropSize(h, !0, !1, 1, 0))
+        }, null, 32),
+        w("span", {
+          class: "crop-line line-s",
+          onMousedown: e[8] || (e[8] = (h) => s.changeCropSize(h, !1, !0, 0, 2)),
+          onTouchstart: e[9] || (e[9] = (h) => s.changeCropSize(h, !1, !0, 0, 2))
+        }, null, 32),
+        w("span", {
+          class: "crop-line line-d",
+          onMousedown: e[10] || (e[10] = (h) => s.changeCropSize(h, !0, !1, 2, 0)),
+          onTouchstart: e[11] || (e[11] = (h) => s.changeCropSize(h, !0, !1, 2, 0))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point1",
+          onMousedown: e[12] || (e[12] = (h) => s.changeCropSize(h, !0, !0, 1, 1)),
+          onTouchstart: e[13] || (e[13] = (h) => s.changeCropSize(h, !0, !0, 1, 1))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point2",
+          onMousedown: e[14] || (e[14] = (h) => s.changeCropSize(h, !1, !0, 0, 1)),
+          onTouchstart: e[15] || (e[15] = (h) => s.changeCropSize(h, !1, !0, 0, 1))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point3",
+          onMousedown: e[16] || (e[16] = (h) => s.changeCropSize(h, !0, !0, 2, 1)),
+          onTouchstart: e[17] || (e[17] = (h) => s.changeCropSize(h, !0, !0, 2, 1))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point4",
+          onMousedown: e[18] || (e[18] = (h) => s.changeCropSize(h, !0, !1, 1, 0)),
+          onTouchstart: e[19] || (e[19] = (h) => s.changeCropSize(h, !0, !1, 1, 0))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point5",
+          onMousedown: e[20] || (e[20] = (h) => s.changeCropSize(h, !0, !1, 2, 0)),
+          onTouchstart: e[21] || (e[21] = (h) => s.changeCropSize(h, !0, !1, 2, 0))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point6",
+          onMousedown: e[22] || (e[22] = (h) => s.changeCropSize(h, !0, !0, 1, 2)),
+          onTouchstart: e[23] || (e[23] = (h) => s.changeCropSize(h, !0, !0, 1, 2))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point7",
+          onMousedown: e[24] || (e[24] = (h) => s.changeCropSize(h, !1, !0, 0, 2)),
+          onTouchstart: e[25] || (e[25] = (h) => s.changeCropSize(h, !1, !0, 0, 2))
+        }, null, 32),
+        w("span", {
+          class: "crop-point point8",
+          onMousedown: e[26] || (e[26] = (h) => s.changeCropSize(h, !0, !0, 2, 2)),
+          onTouchstart: e[27] || (e[27] = (h) => s.changeCropSize(h, !0, !0, 2, 2))
+        }, null, 32)
+      ]))
+    ], 4), [
+      [k, t.cropping]
+    ])
+  ], 544);
+}
+const ot = /* @__PURE__ */ N(Q, [["render", rt], ["__scopeId", "data-v-168a3964"]]), ht = { class: "h-full" }, at = { class: "avatar-upload-preview" }, nt = ["src"], lt = /* @__PURE__ */ R({
+  __name: "uploadAvatar",
+  props: {
+    avatar: { default: "" },
+    close: { type: Function, default: close }
+  },
+  setup(t) {
+    const { postSinglefile: e } = V(), i = t, { proxy: r } = D();
+    let { avatar: o } = F(i);
+    const s = U({
+      img: "",
+      // 需要剪裁的图片
+      autoCrop: !0,
+      // 是否默认生成截图框
+      autoCropWidth: 150,
+      // 默认生成截图框的宽度
+      autoCropHeight: 150,
+      // 默认生成截图框的长度
+      fixedBox: !1,
+      // 是否固定截图框的大小 不允许改变
+      info: !0,
+      // 裁剪框的大小信息
+      outputSize: 0.5,
+      // 裁剪生成图片的质量 [1至0.1]
+      outputType: "jpeg",
+      // 裁剪生成图片的格式
+      canScale: !1,
+      // 图片是否允许滚轮缩放
+      fixed: !1,
+      // 是否开启截图框宽高固定比例
+      fixedNumber: [1, 1],
+      // 截图框的宽高比例 需要配合centerBox一起使用才能生效
+      full: !0,
+      // 是否输出原图比例的截图
+      canMoveBox: !1,
+      // 截图框能否拖动
+      original: !1,
+      // 上传图片按照原始比例渲染
+      centerBox: !0,
+      // 截图框是否被限制在图片里面
+      infoTrue: !0
+      // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+    }), h = I({}), n = I({}), c = I(!1);
+    let l = (d) => {
+      d == "left" && n.value.rotateLeft(), d == "right" && n.value.rotateRight();
+    }, a = (d) => {
+      const f = d || 1;
+      n.value.changeScale(f);
+    }, p = () => {
+      n.value.refresh();
+    };
+    const u = (d) => {
+      h.value = d;
+    };
+    let b = () => {
+    }, g = (d) => {
+      if (["image/png", "image/jpg", "image/jpeg", "image/PNG", "image/JPG", "image/JPEG"].includes(d.type)) {
+        const C = new FileReader();
+        C.readAsDataURL(d), C.onload = () => {
+          s.img = C.result;
+        };
+      } else
+        return r.$message.error("图片格式有误，请重新上传"), !1;
+    }, m = () => {
+      if (!s.img) {
+        r.$message.warning("请先选择图片");
+        return;
+      }
+      n.value.getCropBlob((d) => {
+        console.log(d);
+        let f = new FormData();
+        f.append("file", d), console.log(f), e(f).then((C) => {
+          console.log(C), C.code === 1 ? (i.close(), c.value = !1, r.$message.success("上传成功")) : r.$message.error("上传失败");
+        });
+      });
+    };
+    return j(() => {
+      setTimeout(() => {
+        s.img = o.value;
+      }, 100);
+    }), (d, f) => {
+      const C = X("el-col"), E = X("el-row"), B = X("bc-icon"), H = X("el-button"), $ = X("hs-upload");
+      return O(), Y("div", ht, [
+        v(E, null, {
+          default: x(() => [
+            v(C, {
+              xs: 24,
+              md: 13,
+              style: { height: "350px" }
+            }, {
+              default: x(() => [
+                v(ot, {
+                  ref_key: "cropperRef",
+                  ref: n,
+                  img: s.img,
+                  info: !0,
+                  infoTrue: s.infoTrue,
+                  "auto-crop": s.autoCrop,
+                  "fixed-box": s.fixedBox,
+                  fixedNumber: s.fixedNumber,
+                  fixed: s.fixed,
+                  centerBox: s.centerBox,
+                  onRealTime: u
+                }, null, 8, ["img", "infoTrue", "auto-crop", "fixed-box", "fixedNumber", "fixed", "centerBox"])
+              ]),
+              _: 1
+            }),
+            v(C, {
+              xs: 24,
+              md: 11,
+              style: { height: "350px" }
+            }, {
+              default: x(() => [
+                w("div", at, [
+                  w("img", {
+                    src: h.value.url,
+                    style: M(h.value.img)
+                  }, null, 12, nt)
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }),
+        v(E, { class: "ptb2 py-3" }, {
+          default: x(() => [
+            v(C, {
+              lg: 2,
+              md: 2
+            }, {
+              default: x(() => [
+                v($, {
+                  action: "#",
+                  "http-request": y(b),
+                  "show-file-list": !1,
+                  "before-upload": y(g)
+                }, {
+                  default: x(() => [
+                    v(H, { size: "default" }, {
+                      default: x(() => [
+                        L(" 选择 "),
+                        v(B, { name: "ele-UploadFilled" })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["http-request", "before-upload"])
+              ]),
+              _: 1
+            }),
+            v(C, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: x(() => [
+                v(H, {
+                  size: "default",
+                  icon: "ele-Plus",
+                  onClick: f[0] || (f[0] = (W) => y(a)(1))
+                })
+              ]),
+              _: 1
+            }),
+            v(C, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: x(() => [
+                v(H, {
+                  size: "default",
+                  icon: "ele-Minus",
+                  onClick: f[1] || (f[1] = (W) => y(a)(-1))
+                })
+              ]),
+              _: 1
+            }),
+            v(C, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: x(() => [
+                v(H, {
+                  size: "default",
+                  icon: "ele-RefreshLeft",
+                  onClick: f[2] || (f[2] = (W) => y(l)("left"))
+                })
+              ]),
+              _: 1
+            }),
+            v(C, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: x(() => [
+                v(H, {
+                  size: "default",
+                  icon: "ele-RefreshRight",
+                  onClick: f[3] || (f[3] = (W) => y(l)("right"))
+                })
+              ]),
+              _: 1
+            }),
+            v(C, {
+              lg: { span: 1, offset: 1 },
+              md: 2
+            }, {
+              default: x(() => [
+                v(H, {
+                  size: "default",
+                  onClick: f[4] || (f[4] = (W) => y(p)())
+                }, {
+                  default: x(() => [
+                    L("重 置")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            v(C, {
+              lg: { span: 1, offset: 7 },
+              md: 2
+            }, {
+              default: x(() => [
+                v(H, {
+                  size: "default",
+                  type: "primary",
+                  onClick: f[5] || (f[5] = (W) => y(m)())
+                }, {
+                  default: x(() => [
+                    L("提 交")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), ft = /* @__PURE__ */ N(lt, [["__scopeId", "data-v-2e31534c"]]);
+export {
+  ft as default
+};