sapit-ui-plus/lib/js/CropperModal.js

var B = Object.defineProperty, P = Object.defineProperties;
var R = Object.getOwnPropertyDescriptors;
var I = Object.getOwnPropertySymbols;
var U = Object.prototype.hasOwnProperty, D = Object.prototype.propertyIsEnumerable;
var S = (t, e, i) => e in t ? B(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, L = (t, e) => {
  for (var i in e || (e = {}))
    U.call(e, i) && S(t, i, e[i]);
  if (I)
    for (var i of I(e))
      D.call(e, i) && S(t, i, e[i]);
  return t;
}, k = (t, e) => P(t, R(e));
import { defineComponent as F, openBlock as H, createElementBlock as W, withDirectives as E, createElementVNode as w, normalizeStyle as y, vShow as T, createCommentVNode as Y, normalizeClass as q, toDisplayString as X, ref as C, resolveComponent as V, createBlock as j, withCtx as b, createVNode as O, createTextVNode as N, unref as Q } from "vue";
import { u as Z } from "./upload.js";
import { l as G, U as J } from "./index2.js";
import { _ as K, a as tt } from "./index17.js";
const $ = {};
$.getData = (t) => new Promise((e, i) => {
  let s = {};
  et(t).then((h) => {
    s.arrayBuffer = h;
    try {
      s.orientation = ot(h);
    } catch (o) {
      s.orientation = -1;
    }
    e(s);
  }).catch((h) => {
    i(h);
  });
});
function et(t) {
  let e = null;
  return new Promise((i, s) => {
    if (t.src)
      if (/^data\:/i.test(t.src))
        e = st(t.src), i(e);
      else if (/^blob\:/i.test(t.src)) {
        var h = new FileReader();
        h.onload = function(r) {
          e = r.target.result, i(e);
        }, it(t.src, function(r) {
          h.readAsArrayBuffer(r);
        });
      } else {
        var o = new XMLHttpRequest();
        o.onload = function() {
          if (this.status == 200 || this.status === 0)
            e = o.response, i(e);
          else
            throw "Could not load image";
          o = null;
        }, o.open("GET", t.src, !0), o.responseType = "arraybuffer", o.send(null);
      }
    else
      s("img error");
  });
}
function it(t, e) {
  var i = new XMLHttpRequest();
  i.open("GET", t, !0), i.responseType = "blob", i.onload = function(s) {
    (this.status == 200 || this.status === 0) && e(this.response);
  }, i.send();
}
function st(t, e) {
  e = e || t.match(/^data\:([^\;]+)\;base64,/mi)[1] || "", t = t.replace(/^data\:([^\;]+)\;base64,/gmi, "");
  for (var i = atob(t), s = i.length % 2 == 0 ? i.length : i.length + 1, h = new ArrayBuffer(s), o = new Uint16Array(h), r = 0; r < s; r++)
    o[r] = i.charCodeAt(r);
  return h;
}
function ht(t, e, i) {
  var s = "", h;
  for (h = e, i += e; h < i; h++)
    s += String.fromCharCode(t.getUint8(h));
  return s;
}
function ot(t) {
  var e = new DataView(t), i = e.byteLength, s, h, o, r, a, n, c, p, u, l;
  if (e.getUint8(0) === 255 && e.getUint8(1) === 216)
    for (u = 2; u < i; ) {
      if (e.getUint8(u) === 255 && e.getUint8(u + 1) === 225) {
        c = u;
        break;
      }
      u++;
    }
  if (c && (h = c + 4, o = c + 10, ht(e, h, 4) === "Exif" && (n = e.getUint16(o), a = n === 18761, (a || n === 19789) && e.getUint16(o + 2, a) === 42 && (r = e.getUint32(o + 4, a), r >= 8 && (p = o + r)))), p) {
    for (i = e.getUint16(p, a), l = 0; l < i; l++)
      if (u = p + l * 12 + 2, e.getUint16(u, a) === 274) {
        u += 8, s = e.getUint16(u, a);
        break;
      }
  }
  return s;
}
const rt = (t, e) => {
  const i = t.__vccOpts || t;
  for (const [s, h] of e)
    i[s] = h;
  return i;
}, at = F({
  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,
      // 图片是否等于截图大小
      imgIsQqualCrop: !1
    };
  },
  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
      };
    },
    // 是否处于左右旋转
    isRotateRightOrLeft() {
      return [1, -1, 3, -3].includes(this.rotate);
    }
  },
  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 s = 0;
      const h = new RegExp(t, "i");
      for (var o = 0; o < e.length; o++)
        h.test(e[o]) && (i = e[o]);
      return i ? s = i.split("/")[1].split(".") : s = ["0", "0", "0"], s;
    },
    checkOrientationImage(t, e, i, s) {
      if (this.getVersion("chrome")[0] >= 81)
        e = -1;
      else if (this.getVersion("safari")[0] >= 605) {
        const r = this.getVersion("version");
        r[0] > 13 && r[1] > 1 && (e = -1);
      } else {
        const r = navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/);
        if (r) {
          let a = r[1];
          a = a.split("_"), (a[0] > 13 || a[0] >= 13 && a[1] >= 4) && (e = -1);
        }
      }
      let h = document.createElement("canvas"), o = h.getContext("2d");
      switch (o.save(), e) {
        case 2:
          h.width = i, h.height = s, o.translate(i, 0), o.scale(-1, 1);
          break;
        case 3:
          h.width = i, h.height = s, o.translate(i / 2, s / 2), o.rotate(180 * Math.PI / 180), o.translate(-i / 2, -s / 2);
          break;
        case 4:
          h.width = i, h.height = s, o.translate(0, s), o.scale(1, -1);
          break;
        case 5:
          h.height = i, h.width = s, o.rotate(0.5 * Math.PI), o.scale(1, -1);
          break;
        case 6:
          h.width = s, h.height = i, o.translate(s / 2, i / 2), o.rotate(90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
          break;
        case 7:
          h.height = i, h.width = s, o.rotate(0.5 * Math.PI), o.translate(i, -s), o.scale(-1, 1);
          break;
        case 8:
          h.height = i, h.width = s, o.translate(s / 2, i / 2), o.rotate(-90 * Math.PI / 180), o.translate(-i / 2, -s / 2);
          break;
        default:
          h.width = i, h.height = s;
      }
      o.drawImage(t, 0, 0, i, s), o.restore(), h.toBlob(
        (r) => {
          let a = URL.createObjectURL(r);
          URL.revokeObjectURL(this.imgs), this.imgs = a;
        },
        "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.imgIsQqualCrop = !1, this.clearCrop();
      let t = new Image();
      if (t.onload = () => {
        if (this.img === "")
          return this.$emit("img-load", new Error("图片不能为空")), !1;
        let i = t.width, s = t.height;
        $.getData(t).then((h) => {
          this.orientation = h.orientation || 1;
          let o = Number(this.maxImgSize);
          if (!this.orientation && i < o & s < o) {
            this.imgs = this.img;
            return;
          }
          i > o && (s = s / i * o, i = o), s > o && (i = i / s * o, s = o), this.checkOrientationImage(t, this.orientation, i, s);
        }).catch((h) => {
          this.$emit("img-load", "error"), this.$emit("img-load-error", h);
        });
      }, t.onerror = (i) => {
        this.$emit("img-load", "error"), this.$emit("img-load-error", i);
      }, 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("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
      }, s = {
        x: t.touches[0].clientX,
        y: t.touches[0].clientY
      }, h = {
        x: this.touches[1].clientX,
        y: this.touches[1].clientY
      }, o = {
        x: t.touches[1].clientX,
        y: t.touches[1].clientY
      }, r = Math.sqrt(
        Math.pow(i.x - h.x, 2) + Math.pow(i.y - h.y, 2)
      ), a = Math.sqrt(
        Math.pow(s.x - o.x, 2) + Math.pow(s.y - o.y, 2)
      ), n = a - r, c = 1;
      c = c / this.trueWidth > c / this.trueHeight ? c / this.trueHeight : c / this.trueWidth, c = c > 0.1 ? 0.1 : c;
      var p = c * n;
      if (!this.touchNow) {
        if (this.touchNow = !0, n > 0 ? e += Math.abs(p) : n < 0 && e > Math.abs(p) && (e -= Math.abs(p)), 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, s, h;
      s = e - this.moveX, h = i - this.moveY, this.$nextTick(() => {
        if (this.centerBox) {
          let o = this.getImgAxis(s, h, this.scale), r = this.getCropAxis(), a = this.trueHeight * this.scale, n = this.trueWidth * this.scale, c, p, u, l;
          switch (this.rotate) {
            case 1:
            case -1:
            case 3:
            case -3:
              c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2 + (a - n) / 2, p = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2 + (n - a) / 2, u = c - a + this.cropW, l = p - n + this.cropH;
              break;
            default:
              c = this.cropOffsertX - this.trueWidth * (1 - this.scale) / 2, p = this.cropOffsertY - this.trueHeight * (1 - this.scale) / 2, u = c - n + this.cropW, l = p - a + this.cropH;
              break;
          }
          o.x1 >= r.x1 && (s = c), o.y1 >= r.y1 && (h = p), o.x2 <= r.x2 && (s = u), o.y2 <= r.y2 && (h = l);
        }
        this.x = s, this.y = h, 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("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, s = navigator.userAgent.indexOf("Firefox");
      i = s > 0 ? i * 30 : i, this.isIE && (i = -i);
      var h = this.coe;
      h = h / this.trueWidth > h / this.trueHeight ? h / this.trueHeight : h / this.trueWidth;
      var o = h * i;
      o < 0 ? e += Math.abs(o) : e > Math.abs(o) && (e -= Math.abs(o));
      let r = o < 0 ? "add" : "reduce";
      if (r !== this.coeStatus && (this.coeStatus = r, 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 s = e - this.cropX, h = i - this.cropY;
        if (s > 0 ? (this.cropW = s + this.cropChangeX > this.w ? this.w - this.cropChangeX : s, this.cropOffsertX = this.cropChangeX) : (this.cropW = this.w - this.cropChangeX + Math.abs(s) > this.w ? this.cropChangeX : Math.abs(s), this.cropOffsertX = this.cropChangeX + s > 0 ? this.cropChangeX + s : 0), !this.fixed)
          h > 0 ? (this.cropH = h + this.cropChangeY > this.h ? this.h - this.cropChangeY : h, this.cropOffsertY = this.cropChangeY) : (this.cropH = this.h - this.cropChangeY + Math.abs(h) > this.h ? this.cropChangeY : Math.abs(h), this.cropOffsertY = this.cropChangeY + h > 0 ? this.cropChangeY + h : 0);
        else {
          var o = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
          o + this.cropOffsertY > this.h ? (this.cropH = this.h - this.cropOffsertY, this.cropW = this.cropH / this.fixedNumber[1] * this.fixedNumber[0], s > 0 ? this.cropOffsertX = this.cropChangeX : this.cropOffsertX = this.cropChangeX - this.cropW) : this.cropH = o, this.cropOffsertY = this.cropOffsertY;
        }
      });
    },
    // 改变截图框大小
    changeCropSize(t, e, i, s, h) {
      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 = s, this.changeCropTypeY = h, 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("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 s = this.w, h = this.h, o = 0, r = 0;
      if (this.centerBox) {
        let c = this.getImgAxis(), p = c.x2, u = c.y2;
        o = c.x1 > 0 ? c.x1 : 0, r = c.y1 > 0 ? c.y1 : 0, s > p && (s = p), h > u && (h = u);
      }
      const [a, n] = this.checkCropLimitSize();
      this.$nextTick(() => {
        var c = e - this.cropX, p = i - this.cropY;
        if (this.canChangeX && (this.changeCropTypeX === 1 ? this.cropOldW - c < a ? (this.cropW = a, this.cropOffsertX = this.cropOldW + this.cropChangeX - o - a) : this.cropOldW - c > 0 ? (this.cropW = s - this.cropChangeX - c <= s - o ? this.cropOldW - c : this.cropOldW + this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX - c <= s - o ? this.cropChangeX + c : o) : (this.cropW = Math.abs(c) + this.cropChangeX <= s ? Math.abs(c) - this.cropOldW : s - this.cropOldW - this.cropChangeX, this.cropOffsertX = this.cropChangeX + this.cropOldW) : this.changeCropTypeX === 2 && (this.cropOldW + c < a ? this.cropW = a : this.cropOldW + c > 0 ? (this.cropW = this.cropOldW + c + this.cropOffsertX <= s ? this.cropOldW + c : s - this.cropOffsertX, this.cropOffsertX = this.cropChangeX) : (this.cropW = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? Math.abs(c + this.cropOldW) : this.cropChangeX - o, this.cropOffsertX = s - this.cropChangeX + Math.abs(c + this.cropOldW) <= s - o ? this.cropChangeX - Math.abs(c + this.cropOldW) : o))), this.canChangeY && (this.changeCropTypeY === 1 ? this.cropOldH - p < n ? (this.cropH = n, this.cropOffsertY = this.cropOldH + this.cropChangeY - r - n) : this.cropOldH - p > 0 ? (this.cropH = h - this.cropChangeY - p <= h - r ? this.cropOldH - p : this.cropOldH + this.cropChangeY - r, this.cropOffsertY = h - this.cropChangeY - p <= h - r ? this.cropChangeY + p : r) : (this.cropH = Math.abs(p) + this.cropChangeY <= h ? Math.abs(p) - this.cropOldH : h - this.cropOldH - this.cropChangeY, this.cropOffsertY = this.cropChangeY + this.cropOldH) : this.changeCropTypeY === 2 && (this.cropOldH + p < n ? this.cropH = n : this.cropOldH + p > 0 ? (this.cropH = this.cropOldH + p + this.cropOffsertY <= h ? this.cropOldH + p : h - this.cropOffsertY, this.cropOffsertY = this.cropChangeY) : (this.cropH = h - this.cropChangeY + Math.abs(p + this.cropOldH) <= h - r ? Math.abs(p + this.cropOldH) : this.cropChangeY - r, this.cropOffsertY = h - this.cropChangeY + Math.abs(p + this.cropOldH) <= h - r ? this.cropChangeY - Math.abs(p + this.cropOldH) : r))), this.canChangeX && this.fixed) {
          var u = this.cropW / this.fixedNumber[0] * this.fixedNumber[1];
          u < n ? (this.cropH = n, this.cropW = this.fixedNumber[0] * n / this.fixedNumber[1], this.changeCropTypeX === 1 && (this.cropOffsertX = this.cropChangeX + (this.cropOldW - this.cropW))) : u + this.cropOffsertY > h ? (this.cropH = h - 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 = u;
        }
        if (this.canChangeY && this.fixed) {
          var l = this.cropH / this.fixedNumber[1] * this.fixedNumber[0];
          l < a ? (this.cropW = a, this.cropH = this.fixedNumber[1] * a / this.fixedNumber[0], this.cropOffsertY = this.cropOldH + this.cropChangeY - this.cropH) : l + this.cropOffsertX > s ? (this.cropW = s - this.cropOffsertX, this.cropH = this.cropW / this.fixedNumber[0] * this.fixedNumber[1]) : this.cropW = l;
        }
      });
    },
    checkCropLimitSize() {
      let { cropW: t, cropH: e, limitMinSize: i } = this, s = new Array();
      return Array.isArray(i) ? s = i : s = [i, i], t = parseFloat(s[0]), e = parseFloat(s[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, s, h, o) {
      const r = t / e;
      let a = h, n = o;
      return a < i && (a = i, n = Math.ceil(a / r)), n < s && (n = s, a = Math.ceil(n * r), a < i && (a = i, n = Math.ceil(a / r))), a < h && (a = h, n = Math.ceil(a / r)), n < o && (n = o, a = Math.ceil(n * r)), { width: a, height: n };
    },
    // 创建完成
    endCrop() {
      this.cropW === 0 && this.cropH === 0 && (this.cropping = !1);
      let [t, e] = this.checkCropLimitSize();
      const { width: i, height: s } = 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)), s > this.cropH && (this.cropH = s, this.cropOffsertY + s > this.h && (this.cropOffsertY = this.h - s)), 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, s, h;
      s = e - this.cropOffsertX, h = i - this.cropOffsertY, this.cropX = s, this.cropY = h, this.$emit("crop-moving", {
        moving: !0,
        axis: this.getCropAxis()
      });
    },
    moveCrop(t, e) {
      let i = 0, s = 0;
      t && (t.preventDefault(), i = "clientX" in t ? t.clientX : t.touches[0].clientX, s = "clientY" in t ? t.clientY : t.touches[0].clientY), this.$nextTick(() => {
        let h, o, r = i - this.cropX, a = s - this.cropY;
        if (e && (r = this.cropOffsertX, a = this.cropOffsertY), r <= 0 ? h = 0 : r + this.cropW > this.w ? h = this.w - this.cropW : h = r, a <= 0 ? o = 0 : a + this.cropH > this.h ? o = this.h - this.cropH : o = a, this.centerBox) {
          let n = this.getImgAxis();
          h <= n.x1 && (h = n.x1), h + this.cropW > n.x2 && (h = n.x2 - this.cropW), o <= n.y1 && (o = n.y1), o + this.cropH > n.y2 && (o = n.y2 - this.cropH);
        }
        this.cropOffsertX = h, this.cropOffsertY = o, 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 s = {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 0
      }, h = this.trueWidth * i, o = this.trueHeight * i;
      switch (this.rotate) {
        case 0:
          s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
          break;
        case 1:
        case -1:
        case 3:
        case -3:
          s.x1 = t + this.trueWidth * (1 - i) / 2 + (h - o) / 2, s.x2 = s.x1 + this.trueHeight * i, s.y1 = e + this.trueHeight * (1 - i) / 2 + (o - h) / 2, s.y2 = s.y1 + this.trueWidth * i;
          break;
        default:
          s.x1 = t + this.trueWidth * (1 - i) / 2, s.x2 = s.x1 + this.trueWidth * i, s.y1 = e + this.trueHeight * (1 - i) / 2, s.y2 = s.y1 + this.trueHeight * i;
          break;
      }
      return s;
    },
    // 获取截图框的坐标轴
    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("crop-moving", {
        moving: !1,
        axis: this.getCropAxis()
      });
    },
    getCropChecked(t) {
      let e = document.createElement("canvas"), i = e.getContext("2d"), s = new Image(), h = this.rotate, o = this.trueWidth, r = this.trueHeight, a = this.cropOffsertX, n = this.cropOffsertY;
      s.onload = () => {
        if (this.cropW !== 0) {
          let l = 1;
          this.high & !this.full && (l = window.devicePixelRatio), this.enlarge !== 1 & !this.full && (l = Math.abs(Number(this.enlarge)));
          let g = this.cropW * l, x = this.cropH * l, v = o * this.scale * l, d = r * this.scale * l, f = (this.x - a + this.trueWidth * (1 - this.scale) / 2) * l, m = (this.y - n + this.trueHeight * (1 - this.scale) / 2) * l;
          switch (u(g, x), i.save(), h) {
            case 0:
              this.full ? (u(g / this.scale, x / this.scale), i.drawImage(
                s,
                f / this.scale,
                m / this.scale,
                v / this.scale,
                d / this.scale
              )) : i.drawImage(s, f, m, v, d);
              break;
            case 1:
            case -3:
              this.full ? (u(g / this.scale, x / this.scale), f = f / this.scale + (v / this.scale - d / this.scale) / 2, m = m / this.scale + (d / this.scale - v / this.scale) / 2, i.rotate(h * 90 * Math.PI / 180), i.drawImage(
                s,
                m,
                -f - d / this.scale,
                v / this.scale,
                d / this.scale
              )) : (f = f + (v - d) / 2, m = m + (d - v) / 2, i.rotate(h * 90 * Math.PI / 180), i.drawImage(s, m, -f - d, v, d));
              break;
            case 2:
            case -2:
              this.full ? (u(g / this.scale, x / this.scale), i.rotate(h * 90 * Math.PI / 180), f = f / this.scale, m = m / this.scale, i.drawImage(
                s,
                -f - v / this.scale,
                -m - d / this.scale,
                v / this.scale,
                d / this.scale
              )) : (i.rotate(h * 90 * Math.PI / 180), i.drawImage(s, -f - v, -m - d, v, d));
              break;
            case 3:
            case -1:
              this.full ? (u(g / this.scale, x / this.scale), f = f / this.scale + (v / this.scale - d / this.scale) / 2, m = m / this.scale + (d / this.scale - v / this.scale) / 2, i.rotate(h * 90 * Math.PI / 180), i.drawImage(
                s,
                -m - v / this.scale,
                f,
                v / this.scale,
                d / this.scale
              )) : (f = f + (v - d) / 2, m = m + (d - v) / 2, i.rotate(h * 90 * Math.PI / 180), i.drawImage(s, -m - v, f, v, d));
              break;
            default:
              this.full ? (u(g / this.scale, x / this.scale), i.drawImage(
                s,
                f / this.scale,
                m / this.scale,
                v / this.scale,
                d / this.scale
              )) : i.drawImage(s, f, m, v, d);
          }
          i.restore();
        } else {
          let l = o * this.scale, g = r * this.scale;
          switch (i.save(), h) {
            case 0:
              u(l, g), i.drawImage(s, 0, 0, l, g);
              break;
            case 1:
            case -3:
              u(g, l), i.rotate(h * 90 * Math.PI / 180), i.drawImage(s, 0, -g, l, g);
              break;
            case 2:
            case -2:
              u(l, g), i.rotate(h * 90 * Math.PI / 180), i.drawImage(s, -l, -g, l, g);
              break;
            case 3:
            case -1:
              u(g, l), i.rotate(h * 90 * Math.PI / 180), i.drawImage(s, -l, 0, l, g);
              break;
            default:
              u(l, g), i.drawImage(s, 0, 0, l, g);
          }
          i.restore();
        }
        t(e);
      };
      var c = this.img.substr(0, 4);
      c !== "data" && (s.crossOrigin = "Anonymous"), s.src = this.imgs;
      const p = this.fillColor;
      function u(l, g) {
        e.width = Math.round(l), e.height = Math.round(g), p && (i.fillStyle = p, i.fillRect(0, 0, e.width, e.height));
      }
    },
    // 获取转换成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 s = {};
      s.div = {
        width: `${t}px`,
        height: `${e}px`
      };
      let h = (this.x - this.cropOffsertX) / i, o = (this.y - this.cropOffsertY) / i, r = 0;
      s.w = t, s.h = e, s.url = this.imgs, s.img = {
        width: `${this.trueWidth}px`,
        height: `${this.trueHeight}px`,
        transform: `scale(${i})translate3d(${h}px, ${o}px, ${r}px)rotateZ(${this.rotate * 90}deg)`
      }, s.html = `
      <div class="show-preview" style="width: ${s.w}px; height: ${s.h}px,; overflow: hidden">
        <div style="width: ${t}px; height: ${e}px">
          <img src=${s.url} style="width: ${this.trueWidth}px; height: ${this.trueHeight}px; transform:
          scale(${i})translate3d(${h}px, ${o}px, ${r}px)rotateZ(${this.rotate * 90}deg)">
        </div>
      </div>`, this.$emit("real-time", s);
    },
    // 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"), setTimeout(() => {
            this.showPreview();
          }, 20);
        });
      }, t.onerror = () => {
        this.$emit("img-load", "error");
      }, t.src = this.imgs;
    },
    // 背景布局的函数
    checkedMode() {
      let t = 1, e = this.trueWidth, i = this.trueHeight;
      const s = this.mode.split(" ");
      switch (s[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 h = s[0];
            if (h.search("px") !== -1) {
              h = h.replace("px", ""), e = parseFloat(h);
              const o = e / this.trueWidth;
              let r = 1, a = s[1];
              a.search("px") !== -1 && (a = a.replace("px", ""), i = parseFloat(a), r = i / this.trueHeight), t = Math.min(o, r);
            }
            if (h.search("%") !== -1 && (h = h.replace("%", ""), e = parseFloat(h) / 100 * this.w, t = e / this.trueWidth), s.length === 2 && h === "auto") {
              let o = s[1];
              o.search("px") !== -1 && (o = o.replace("px", ""), i = parseFloat(o), t = i / this.trueHeight), o.search("%") !== -1 && (o = o.replace("%", ""), i = parseFloat(o) / 100 * this.h, t = i / this.trueHeight);
            }
          } catch (h) {
            t = 1;
          }
      }
      return t;
    },
    // 自动截图函数
    goAutoCrop(t, e) {
      if (this.imgs === "" || this.imgs === null)
        return;
      this.clearCrop(), this.cropping = !0;
      let i = this.w, s = this.h;
      if (this.centerBox) {
        const r = Math.abs(this.rotate) % 2 > 0;
        let a = (r ? this.trueHeight : this.trueWidth) * this.scale, n = (r ? this.trueWidth : this.trueHeight) * this.scale;
        i = a < i ? a : i, s = n < s ? n : s;
      }
      var h = t || parseFloat(this.autoCropWidth), o = e || parseFloat(this.autoCropHeight);
      (h === 0 || o === 0) && (h = i * 0.8, o = s * 0.8), h = h > i ? i : h, o = o > s ? s : o, this.fixed && (o = h / this.fixedNumber[0] * this.fixedNumber[1]), o > this.h && (o = this.h, h = o / this.fixedNumber[1] * this.fixedNumber[0]), this.changeCrop(h, o);
    },
    // 手动改变截图框大小函数
    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.imgIsQqualCrop = !1, 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 s = !0;
      if (this.centerBox) {
        let h = this.getImgAxis(t, e, i), o = this.getCropAxis();
        h.x1 >= o.x1 && (s = !1), h.x2 <= o.x2 && (s = !1), h.y1 >= o.y1 && (s = !1), h.y2 <= o.y2 && (s = !1), s || this.changeImgScale(h, o, i);
      }
      return s;
    },
    // 缩放图片，将图片坐标适配截图框坐标
    changeImgScale(t, e, i) {
      let s = this.trueWidth, h = this.trueHeight, o = s * i, r = h * i;
      if (o >= this.cropW && r >= this.cropH)
        this.scale = i;
      else {
        const a = this.cropW / s, n = this.cropH / h, c = this.cropH <= h * a ? a : n;
        this.scale = c, o = s * c, r = h * c;
      }
      this.imgIsQqualCrop || (t.x1 >= e.x1 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - r) / 2 : this.x = e.x1 - (s - o) / 2), t.x2 <= e.x2 && (this.isRotateRightOrLeft ? this.x = e.x1 - (s - o) / 2 - (o - r) / 2 - r + this.cropW : this.x = e.x2 - (s - o) / 2 - o), t.y1 >= e.y1 && (this.isRotateRightOrLeft ? this.y = e.y1 - (h - r) / 2 - (r - o) / 2 : this.y = e.y1 - (h - r) / 2), t.y2 <= e.y2 && (this.isRotateRightOrLeft ? this.y = e.y2 - (h - r) / 2 - (r - o) / 2 - o : this.y = e.y2 - (h - r) / 2 - r)), (o < this.cropW || r < this.cropH) && (this.imgIsQqualCrop = !0);
    }
  },
  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, s, h) {
        for (var o = atob(this.toDataURL(s, h).split(",")[1]), r = o.length, a = new Uint8Array(r), n = 0; n < r; n++)
          a[n] = o.charCodeAt(n);
        i(new Blob([a], { type: t.type || "image/png" }));
      }
    }), this.showPreview(), this.checkedImg();
  },
  unmounted() {
    window.removeEventListener("mousemove", this.moveCrop), window.removeEventListener("mouseup", this.leaveCrop), window.removeEventListener("touchmove", this.moveCrop), window.removeEventListener("touchend", this.leaveCrop), this.cancelScale();
  }
}), ct = {
  key: 0,
  class: "cropper-box"
}, nt = ["src"], pt = { class: "cropper-view-box" }, lt = ["src"], ut = { key: 1 };
function dt(t, e, i, s, h, o) {
  return H(), W("div", {
    class: "vue-cropper",
    ref: "cropper",
    onMouseover: e[28] || (e[28] = (...r) => t.scaleImg && t.scaleImg(...r)),
    onMouseout: e[29] || (e[29] = (...r) => t.cancelScale && t.cancelScale(...r))
  }, [
    t.imgs ? (H(), W("div", ct, [
      E(w("div", {
        class: "cropper-box-canvas",
        style: y({
          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, nt)
      ], 4), [
        [T, !t.loading]
      ])
    ])) : Y("", !0),
    w("div", {
      class: q(["cropper-drag-box", { "cropper-move": t.move && !t.crop, "cropper-crop": t.crop, "cropper-modal": t.cropping }]),
      onMousedown: e[0] || (e[0] = (...r) => t.startMove && t.startMove(...r)),
      onTouchstart: e[1] || (e[1] = (...r) => t.startMove && t.startMove(...r))
    }, null, 34),
    E(w("div", {
      class: "cropper-crop-box",
      style: y({
        width: t.cropW + "px",
        height: t.cropH + "px",
        transform: "translate3d(" + t.cropOffsertX + "px," + t.cropOffsertY + "px,0)"
      })
    }, [
      w("span", pt, [
        w("img", {
          style: y({
            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, lt)
      ]),
      w("span", {
        class: "cropper-face cropper-move",
        onMousedown: e[2] || (e[2] = (...r) => t.cropMove && t.cropMove(...r)),
        onTouchstart: e[3] || (e[3] = (...r) => t.cropMove && t.cropMove(...r))
      }, null, 32),
      t.info ? (H(), W("span", {
        key: 0,
        class: "crop-info",
        style: y({ top: t.cropInfo.top })
      }, X(t.cropInfo.width) + " × " + X(t.cropInfo.height), 5)) : Y("", !0),
      t.fixedBox ? Y("", !0) : (H(), W("span", ut, [
        w("span", {
          class: "crop-line line-w",
          onMousedown: e[4] || (e[4] = (r) => t.changeCropSize(r, !1, !0, 0, 1)),
          onTouchstart: e[5] || (e[5] = (r) => t.changeCropSize(r, !1, !0, 0, 1))
        }, null, 32),
        w("span", {
          class: "crop-line line-a",
          onMousedown: e[6] || (e[6] = (r) => t.changeCropSize(r, !0, !1, 1, 0)),
          onTouchstart: e[7] || (e[7] = (r) => t.changeCropSize(r, !0, !1, 1, 0))
        }, null, 32),
        w("span", {
          class: "crop-line line-s",
          onMousedown: e[8] || (e[8] = (r) => t.changeCropSize(r, !1, !0, 0, 2)),
          onTouchstart: e[9] || (e[9] = (r) => t.changeCropSize(r, !1, !0, 0, 2))
        }, null, 32),
        w("span", {
          class: "crop-line line-d",
          onMousedown: e[10] || (e[10] = (r) => t.changeCropSize(r, !0, !1, 2, 0)),
          onTouchstart: e[11] || (e[11] = (r) => t.changeCropSize(r, !0, !1, 2, 0))
        }, null, 32),
        w("span", {
          class: "crop-point point1",
          onMousedown: e[12] || (e[12] = (r) => t.changeCropSize(r, !0, !0, 1, 1)),
          onTouchstart: e[13] || (e[13] = (r) => t.changeCropSize(r, !0, !0, 1, 1))
        }, null, 32),
        w("span", {
          class: "crop-point point2",
          onMousedown: e[14] || (e[14] = (r) => t.changeCropSize(r, !1, !0, 0, 1)),
          onTouchstart: e[15] || (e[15] = (r) => t.changeCropSize(r, !1, !0, 0, 1))
        }, null, 32),
        w("span", {
          class: "crop-point point3",
          onMousedown: e[16] || (e[16] = (r) => t.changeCropSize(r, !0, !0, 2, 1)),
          onTouchstart: e[17] || (e[17] = (r) => t.changeCropSize(r, !0, !0, 2, 1))
        }, null, 32),
        w("span", {
          class: "crop-point point4",
          onMousedown: e[18] || (e[18] = (r) => t.changeCropSize(r, !0, !1, 1, 0)),
          onTouchstart: e[19] || (e[19] = (r) => t.changeCropSize(r, !0, !1, 1, 0))
        }, null, 32),
        w("span", {
          class: "crop-point point5",
          onMousedown: e[20] || (e[20] = (r) => t.changeCropSize(r, !0, !1, 2, 0)),
          onTouchstart: e[21] || (e[21] = (r) => t.changeCropSize(r, !0, !1, 2, 0))
        }, null, 32),
        w("span", {
          class: "crop-point point6",
          onMousedown: e[22] || (e[22] = (r) => t.changeCropSize(r, !0, !0, 1, 2)),
          onTouchstart: e[23] || (e[23] = (r) => t.changeCropSize(r, !0, !0, 1, 2))
        }, null, 32),
        w("span", {
          class: "crop-point point7",
          onMousedown: e[24] || (e[24] = (r) => t.changeCropSize(r, !1, !0, 0, 2)),
          onTouchstart: e[25] || (e[25] = (r) => t.changeCropSize(r, !1, !0, 0, 2))
        }, null, 32),
        w("span", {
          class: "crop-point point8",
          onMousedown: e[26] || (e[26] = (r) => t.changeCropSize(r, !0, !0, 2, 2)),
          onTouchstart: e[27] || (e[27] = (r) => t.changeCropSize(r, !0, !0, 2, 2))
        }, null, 32)
      ]))
    ], 4), [
      [T, t.cropping]
    ])
  ], 544);
}
const gt = /* @__PURE__ */ rt(at, [["render", dt], ["__scopeId", "data-v-a742df44"]]), ft = ["src"], mt = {
  __name: "CropperModal",
  emits: ["cropper-ok", "cropper-no"],
  setup(t, { expose: e, emit: i }) {
    const s = i, h = C(!1), o = C(!1), r = C(800), a = C(300), n = C([1, 1.2]), c = C({
      img: "",
      // 裁剪图片的地址
      autoCrop: !0,
      // 是否默认生成截图框
      autoCropWidth: 360,
      // 默认生成截图框宽度
      autoCropHeight: 300,
      // 默认生成截图框高度
      fixedBox: !0,
      // 是否固定截图框大小 不允许改变
      previewsCircle: !1,
      // 预览图是否是原圆形,
      businessTableName: "sapit-ui-plus-components-upload",
      outputType: "png",
      title: window.$l("修改头像")
    }), p = C({}), u = C(), l = (d) => {
      h.value = !0, c.value = Object.assign({}, c, d), c.value.autoCropWidth = 360, c.value.autoCropHeight = 300;
    }, g = () => {
      o.value = !1, h.value = !1, s("cropper-no");
    }, x = () => {
      o.value = !0, u.value.getCropData((d) => {
        Z(d, c.value.businessTableName, c.value.invariantId).then((f) => {
          const m = k(L({
            response: {
              id: f
            },
            invariantId: c.value.invariantId
          }, c.value.file), {
            thumbUrl: d,
            status: "done",
            percent: 100
          });
          s("cropper-ok", m);
        }).finally(() => {
          g();
        });
      });
    }, v = (d) => {
      p.value = d, p.value.style = {
        width: d.w + "px",
        height: d.h + "px",
        margin: 0,
        overflow: "hidden",
        position: "relative",
        border: "1px solid #e8e8e8",
        "border-radius": "2px"
      };
    };
    return e({ edit: l }), (d, f) => {
      const m = K, A = tt, M = J, z = V("s-modal");
      return H(), j(z, {
        value: h.value,
        "onUpdate:value": f[0] || (f[0] = (_) => h.value = _),
        title: c.value.title,
        width: r.value,
        onHandCancel: g
      }, {
        footer: b(() => [
          O(M, {
            key: "back",
            onClick: g
          }, {
            default: b(() => [
              N(X(d.$l("取消")), 1)
            ]),
            _: 1
          }),
          O(M, {
            key: "submit",
            type: "primary",
            loading: o.value,
            onClick: x
          }, {
            default: b(() => [
              N(X(d.$l("保存")), 1)
            ]),
            _: 1
          }, 8, ["loading"])
        ]),
        default: b(() => [
          O(A, null, {
            default: b(() => [
              O(m, {
                xs: 24,
                md: 12,
                style: y({ height: a.value + "px" })
              }, {
                default: b(() => [
                  O(Q(gt), {
                    full: !0,
                    info: !0,
                    fixed: !0,
                    "can-move": !0,
                    "info-true": !0,
                    "can-scale": !1,
                    "center-box": !0,
                    img: c.value.img,
                    "auto-crop": c.value.autoCrop,
                    "fixed-box": c.value.fixedBox,
                    "fixed-number": n.value,
                    style: { width: "360px" },
                    ref_key: "cropper",
                    ref: u,
                    onRealTime: v
                  }, null, 8, ["img", "auto-crop", "fixed-box", "fixed-number"])
                ]),
                _: 1
              }, 8, ["style"]),
              O(m, {
                xs: 24,
                md: 12,
                style: y({ height: a.value + "px" })
              }, {
                default: b(() => [
                  w("div", {
                    style: y(p.value.style)
                  }, [
                    w("img", {
                      style: y(p.value.img),
                      src: p.value.url
                    }, null, 12, ft)
                  ], 4)
                ]),
                _: 1
              }, 8, ["style"])
            ]),
            _: 1
          })
        ]),
        _: 1
      }, 8, ["value", "title", "width"]);
    };
  }
}, bt = /* @__PURE__ */ G(mt, [["__scopeId", "data-v-9c0777ab"]]);
export {
  bt as default
};