@farris/ui-vue 1.0.0-beta.6 → 1.0.1

package/image-cropper/index.esm.js

@@ -0,0 +1,720 @@
+import { defineComponent as ea, inject as aa, ref as r, onMounted as ta, onUnmounted as la, watch as le, createVNode as f, withModifiers as W } from "vue";
+const ia = {
+  /** 输出图片格式 */
+  format: { type: String, default: "png" },
+  /** 保持长宽比例 */
+  maintainAspectRatio: { type: Boolean, default: !0 },
+  /** scale缩放 rotate旋转 flipH横向反转 flipV垂直翻转 执行变化 */
+  transform: { type: Object, default: { scale: 0, rotate: 0, flipH: !1, flipV: !1 } },
+  /** 宽高比例 width/height */
+  aspectRatio: { type: Number, default: 1 },
+  /** 裁剪后图片被调整为的宽度 */
+  resizeToWidth: { type: Number, default: 0 },
+  /** 裁剪后图片被调整为的高度 */
+  resizeToHeight: { type: Number, default: 0 },
+  /** 裁剪最小宽度 */
+  cropperMinWidth: { type: Number, default: 0 },
+  /** 裁剪最小高度 */
+  cropperMinHeight: { type: Number, default: 0 },
+  /** 旋转画布 1 = 90deg  */
+  canvasRotation: { type: Number, default: 0 },
+  /** 裁剪形状是否为圆形 */
+  roundCropper: { type: Boolean, default: !0 },
+  /** 启用这个选项将确保较小的图像不会被放大 */
+  onlyScaleDown: { type: Boolean, default: !1 },
+  /** 适用于使用jpeg或webp作为输出格式时。输入0到100之间的数字将决定输出图像的质量 */
+  imageQuality: { type: Number, default: 92 },
+  /** 是否每次修改cropper的位置或大小时，cropper都会发出一个图像 */
+  autoCrop: { type: Boolean, default: !0 },
+  /** 背景色 */
+  backgroundColor: { type: String, default: "" },
+  /** 是否在图像周围添加填充以使其适合长宽比 */
+  containWithinAspectRatio: { type: Boolean, default: !1 },
+  /** 隐藏 */
+  hideResizeSquares: { type: Boolean, default: !1 },
+  /** 图片加载错误的提示 */
+  loadImageErrorText: { type: String, default: "图片加载错误" },
+  /** 图片居中 */
+  alignImage: { type: String, default: "center" },
+  /** 是否禁用 */
+  disabled: { type: Boolean, default: !1 },
+  /** 图片路径 */
+  imageURL: { type: String, default: "" },
+  /** 图片事件变化 */
+  imageChangedEvent: { type: Object, default: null },
+  /** imageBase64 */
+  imageBase64: { type: String, default: "" },
+  /** imageFile */
+  imageFile: { type: Object, default: null },
+  /** 裁剪的坐标 */
+  cropper: {
+    type: Object,
+    default: {
+      x1: -100,
+      y1: -100,
+      x2: 1e4,
+      y2: 1e4
+    }
+  }
+};
+var oe = /* @__PURE__ */ ((t) => (t.Move = "move", t.Resize = "resize", t))(oe || {});
+function ua() {
+  function t(d) {
+    switch (typeof d == "string" && (d = p(d)), d) {
+      case 2:
+        return { rotate: 0, flip: !0 };
+      case 3:
+        return { rotate: 2, flip: !1 };
+      case 4:
+        return { rotate: 2, flip: !0 };
+      case 5:
+        return { rotate: 1, flip: !0 };
+      case 6:
+        return { rotate: 1, flip: !1 };
+      case 7:
+        return { rotate: 3, flip: !0 };
+      case 8:
+        return { rotate: 3, flip: !1 };
+      default:
+        return { rotate: 0, flip: !1 };
+    }
+  }
+  function p(d) {
+    const a = new DataView(s(d));
+    if (a.getUint16(0, !1) !== 65496)
+      return -2;
+    const m = a.byteLength;
+    let c = 2;
+    for (; c < m; ) {
+      if (a.getUint16(c + 2, !1) <= 8)
+        return -1;
+      const b = a.getUint16(c, !1);
+      if (c += 2, b === 65505) {
+        if (a.getUint32(c += 2, !1) !== 1165519206)
+          return -1;
+        const x = a.getUint16(c += 6, !1) === 18761;
+        c += a.getUint32(c + 4, x);
+        const B = a.getUint16(c, x);
+        c += 2;
+        for (let k = 0; k < B; k++)
+          if (a.getUint16(c + k * 12, x) === 274)
+            return a.getUint16(c + k * 12 + 8, x);
+      } else {
+        if ((b & 65280) !== 65280)
+          break;
+        c += a.getUint16(c, !1);
+      }
+    }
+    return -1;
+  }
+  function s(d) {
+    d = d.replace(/^data:([^;]+);base64,/gmi, "");
+    const a = atob(d), m = a.length, c = new Uint8Array(m);
+    for (let b = 0; b < m; b++)
+      c[b] = a.charCodeAt(b);
+    return c.buffer;
+  }
+  function X(d, a, m) {
+    const c = d.width, b = d.height;
+    a = Math.round(a), m = Math.round(m);
+    const x = c / a, B = b / m, k = Math.ceil(x / 2), u = Math.ceil(B / 2), i = d.getContext("2d");
+    if (i) {
+      const H = i.getImageData(0, 0, c, b), A = i.createImageData(a, m), { data: R } = H, $ = A.data;
+      for (let L = 0; L < m; L++)
+        for (let F = 0; F < a; F++) {
+          const q = (F + L * a) * 4, re = L * B;
+          let _ = 0, K = 0, j = 0, I = 0, D = 0, ie = 0, v = 0;
+          const g = Math.floor(F * x), ee = Math.floor(L * B);
+          let G = Math.ceil((F + 1) * x), J = Math.ceil((L + 1) * B);
+          G = Math.min(G, c), J = Math.min(J, b);
+          for (let M = ee; M < J; M++) {
+            const ue = Math.abs(re - M) / u, z = F * x, ne = ue * ue;
+            for (let O = g; O < G; O++) {
+              const Z = Math.abs(z - O) / k, w = Math.sqrt(ne + Z * Z);
+              if (w >= 1)
+                continue;
+              _ = 2 * w * w * w - 3 * w * w + 1;
+              const h = 4 * (O + M * c);
+              v += _ * R[h + 3], j += _, R[h + 3] < 255 && (_ = _ * R[h + 3] / 250), I += _ * R[h], D += _ * R[h + 1], ie += _ * R[h + 2], K += _;
+            }
+          }
+          $[q] = I / K, $[q + 1] = D / K, $[q + 2] = ie / K, $[q + 3] = v / j;
+        }
+      d.width = a, d.height = m, i.putImageData(A, 0, 0);
+    }
+  }
+  return {
+    resizeCanvas: X,
+    getTransformationsFromExifData: t
+  };
+}
+function na(t, p, s, X) {
+  function d(u, i) {
+    t.value.x2 = t.value.x1 + (t.value.y2 - t.value.y1) * s.value, u = Math.max(t.value.x2 - p.value.width, 0), i = Math.max(0 - t.value.y1, 0), (u > 0 || i > 0) && (t.value.x2 -= i * s.value > u ? i * s.value : u, t.value.y1 += i * s.value > u ? i : u / s.value);
+  }
+  function a(u, i) {
+    t.value.x2 = t.value.x1 + (t.value.y2 - t.value.y1) * s.value, u = Math.max(t.value.x2 - p.value.width, 0), i = Math.max(t.value.y2 - p.value.height, 0), (u > 0 || i > 0) && (t.value.x2 -= i * s.value > u ? i * s.value : u, t.value.y2 -= i * s.value > u ? i : u / s.value);
+  }
+  function m(u, i) {
+    t.value.y1 = t.value.y2 - (t.value.x2 - t.value.x1) / s.value, u = Math.max(0 - t.value.x1, 0), i = Math.max(0 - t.value.y1, 0), (u > 0 || i > 0) && (t.value.x1 += i * s.value > u ? i * s.value : u, t.value.y1 += i * s.value > u ? i : u / s.value);
+  }
+  function c(u, i) {
+    t.value.y1 = t.value.y2 - (t.value.x2 - t.value.x1) / s.value, u = Math.max(t.value.x2 - p.value.width, 0), i = Math.max(0 - t.value.y1, 0), (u > 0 || i > 0) && (t.value.x2 -= i * s.value > u ? i * s.value : u, t.value.y1 += i * s.value > u ? i : u / s.value);
+  }
+  function b(u, i) {
+    t.value.y2 = t.value.y1 + (t.value.x2 - t.value.x1) / s.value, u = Math.max(t.value.x2 - p.value.width, 0), i = Math.max(t.value.y2 - p.value.height, 0), (u > 0 || i > 0) && (t.value.x2 -= i * s.value > u ? i * s.value : u, t.value.y2 -= i * s.value > u ? i : u / s.value);
+  }
+  function x(u, i) {
+    t.value.y2 = t.value.y1 + (t.value.x2 - t.value.x1) / s.value, u = Math.max(0 - t.value.x1, 0), i = Math.max(t.value.y2 - p.value.height, 0), (u > 0 || i > 0) && (t.value.x1 += i * s.value > u ? i * s.value : u, t.value.y2 -= i * s.value > u ? i : u / s.value);
+  }
+  function B() {
+    t.value.x2 = t.value.x1 + (t.value.y2 - t.value.y1) * s.value, t.value.y2 = t.value.y1 + (t.value.x2 - t.value.x1) / s.value;
+    const u = Math.max(0 - t.value.x1, 0), i = Math.max(t.value.x2 - p.value.width, 0), H = Math.max(t.value.y2 - p.value.height, 0), A = Math.max(0 - t.value.y1, 0);
+    (u > 0 || i > 0 || H > 0 || A > 0) && (t.value.x1 += H * s.value > u ? H * s.value : u, t.value.x2 -= A * s.value > i ? A * s.value : i, t.value.y1 += A * s.value > i ? A : i / s.value, t.value.y2 -= H * s.value > u ? H : u / s.value);
+  }
+  function k() {
+    if (p.value.width && p.value.height)
+      switch (X.position) {
+        case "top":
+          d(0, 0);
+          break;
+        case "bottom":
+          a(0, 0);
+          break;
+        case "topleft":
+          m(0, 0);
+          break;
+        case "topright":
+          c(0, 0);
+          break;
+        case "right":
+        case "bottomright":
+          b(0, 0);
+          break;
+        case "left":
+        case "bottomleft":
+          x(0, 0);
+          break;
+        case "center":
+          B();
+          break;
+      }
+  }
+  return { checkAspectRatio: k };
+}
+const Te = /* @__PURE__ */ ea({
+  name: "FImageCropper",
+  props: ia,
+  emits: ["imageCropped", "imageLoaded", "cropperReady", "loadImageFailed"],
+  setup(t, p) {
+    const {
+      resizeCanvas: s,
+      getTransformationsFromExifData: X
+    } = ua(), d = aa("NotifyService"), a = r(t.cropper), m = r(t.transform), c = r(t.cropperMinWidth), b = r(t.maintainAspectRatio), x = r(t.aspectRatio), B = r(t.autoCrop), k = r(t.backgroundColor), u = r(t.resizeToWidth), i = r(t.onlyScaleDown), H = r(t.containWithinAspectRatio), A = r(t.canvasRotation), R = r(t.format), $ = r(t.imageQuality), L = r(t.resizeToHeight), F = r(t.cropperMinHeight), q = r(t.alignImage), re = r(t.roundCropper), _ = r(t.hideResizeSquares), K = r(t.loadImageErrorText), j = r(""), I = r(!0), D = r(!0), ie = r(t.disabled);
+    let v, g, ee = 0, G, J, M;
+    const ue = r(null), z = r(null), ne = r(""), O = r(""), Z = r("0px"), w = r(), h = r({
+      width: 100,
+      height: 100
+    }), P = oe;
+    let ye, S = 20, U = 20, E = !1, Q = {
+      rotate: 0,
+      flip: !1
+    }, o = {
+      active: !1,
+      type: null,
+      position: null,
+      x1: 0,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+      clientX: 0,
+      clientY: 0
+    };
+    const xe = r(t.imageChangedEvent), he = r(t.imageURL), We = r(t.imageBase64), ke = r(t.imageFile);
+    function He() {
+      O.value = "scaleX(" + (m.value.scale || 1) * (m.value.flipH ? -1 : 1) + ")scaleY(" + (m.value.scale || 1) * (m.value.flipV ? -1 : 1) + ")rotate(" + (m.value.rotate || 0) + "deg)";
+    }
+    function ae() {
+      D.value = !1, w.value = null, j.value = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=", o = {
+        active: !1,
+        type: null,
+        position: null,
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: 0,
+        clientX: 0,
+        clientY: 0
+      }, h.value = {
+        width: 0,
+        height: 0
+      }, v = {
+        width: 0,
+        height: 0
+      }, g = {
+        width: 0,
+        height: 0
+      }, a.value.x1 = -100, a.value.y1 = -100, a.value.x2 = 1e4, a.value.y2 = 1e4;
+    }
+    function Ue(e) {
+      return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(e);
+    }
+    function _e() {
+      if (A.value += Q.rotate, H.value && v.width && v.height) {
+        if (A.value % 2) {
+          const n = v.width * x.value, y = v.height / x.value;
+          return {
+            width: Math.max(v.height, n),
+            height: Math.max(v.width, y)
+          };
+        }
+        const e = v.height * x.value, l = v.width / x.value;
+        return {
+          width: Math.max(v.width, e),
+          height: Math.max(v.height, l)
+        };
+      }
+      return A.value % 2 ? {
+        height: v.width,
+        width: v.height
+      } : {
+        width: v.width,
+        height: v.height
+      };
+    }
+    function Se() {
+      A.value += Q.rotate;
+      const e = _e(), l = document.createElement("canvas");
+      e.width && e.height && (l.width = e.width, l.height = e.height);
+      const n = l.getContext("2d");
+      return v.width && v.height && M && (n == null || n.setTransform(Q.flip ? -1 : 1, 0, 0, 1, l.width / 2, l.height / 2), n == null || n.rotate(Math.PI * (A.value / 2)), n == null || n.drawImage(M, -v.width / 2, -v.height / 2)), l.toDataURL();
+    }
+    function Ee(e) {
+      return new Promise((l) => {
+        ye = e, j.value = e, w.value = new Image(), w.value.onload = () => {
+          var n, y;
+          g.width = (n = w.value) == null ? void 0 : n.naturalWidth, g.height = (y = w.value) == null ? void 0 : y.naturalHeight, l();
+        }, w.value.src = ye;
+      });
+    }
+    function Me() {
+      if (!M || !M.complete || !Q)
+        return Promise.reject(new Error("No image loaded"));
+      const e = Se();
+      return Ee(e);
+    }
+    function ve(e) {
+      const l = (n) => {
+        d.show({
+          showCloseButton: !1,
+          timeout: 3e3,
+          animate: "fadeIn",
+          toasts: [{
+            type: "string",
+            title: "提示",
+            msg: "图片上传错误，请重试"
+          }]
+        }), I.value = !1, E = !0, p.emit("loadImageFailed"), M = null, ne.value = "";
+      };
+      M = new Image(), M.onload = () => {
+        ne.value = e, Q = X(e), v.width = M == null ? void 0 : M.naturalWidth, v.height = M == null ? void 0 : M.naturalHeight, Me().then(() => {
+          E = !1;
+        }).catch(l);
+      }, M.onerror = l, M.src = e;
+    }
+    function Be(e, l) {
+      Ue(l) ? (E = !1, ve(e)) : (d.show({
+        showCloseButton: !1,
+        timeout: 3e3,
+        animate: "fadeIn",
+        toasts: [{
+          type: "string",
+          title: "提示",
+          msg: "图片类型不正确,请重试"
+        }]
+      }), I.value = !1, E = !0, p.emit("loadImageFailed"));
+    }
+    function pe(e) {
+      const l = new FileReader();
+      l.onload = (n) => Be(n.target.result, e.type), l.readAsDataURL(e);
+    }
+    function we(e) {
+      const l = new Image();
+      l.onerror = () => {
+        d.show({
+          showCloseButton: !1,
+          timeout: 3e3,
+          animate: "fadeIn",
+          toasts: [{
+            type: "string",
+            title: "提示",
+            msg: "图片加载错误，请重试"
+          }]
+        }), I.value = !1, E = !0, p.emit("loadImageFailed");
+      }, l.onload = () => {
+        E = !1;
+        const n = document.createElement("canvas"), y = n.getContext("2d");
+        n.width = l.width, n.height = l.height, y == null || y.drawImage(l, 0, 0), ve(n.toDataURL());
+      }, l.crossOrigin = "anonymous", l.src = e;
+    }
+    function Le() {
+      return z.value && z.value && z.value.offsetWidth > 0;
+    }
+    function fe() {
+      if (z.value) {
+        const e = z.value;
+        h.value.width = e.offsetWidth, h.value.height = e.offsetHeight, Z.value = "calc(50% - " + h.value.width / 2 + "px)";
+      }
+    }
+    function De() {
+      w.value && h.value.width && (S = c.value > 0 ? Math.max(20, c.value / w.value.width * h.value.width) : 20);
+    }
+    function Fe() {
+      b.value ? U = Math.max(20, S / x.value) : F.value > 0 && w.value && h.value.height ? U = Math.max(20, F.value / w.value.height * h.value.height) : U = 20;
+    }
+    function ce() {
+      w.value ? (De(), Fe()) : (S = 20, U = 20);
+    }
+    function Pe() {
+      const e = z.value, l = r({
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      });
+      if (e && g.width && g.height) {
+        const n = g.width / e.offsetWidth;
+        l.value = {
+          x1: Math.round(a.value.x1 * n),
+          y1: Math.round(a.value.y1 * n),
+          x2: Math.round(a.value.x2 * n),
+          y2: Math.round(a.value.y2 * n)
+        }, H.value || (l.value.x1 = Math.max(l.value.x1, 0), l.value.y1 = Math.max(l.value.y1, 0), l.value.x2 = Math.min(l.value.x2, g.width), l.value.y2 = Math.min(l.value.y2, g.height));
+      }
+      return l.value;
+    }
+    function Ne() {
+      A.value += Q.rotate;
+      const e = z.value, l = r({
+        x1: 0,
+        x2: 0,
+        y1: 0,
+        y2: 0
+      });
+      if (e && g.height && g.width && v.height && v.width) {
+        const n = g.width / e.offsetWidth;
+        let y, C;
+        A.value % 2 ? (y = (g.width - v.height) / 2, C = (g.height - v.width) / 2) : (y = (g.width - v.width) / 2, C = (g.height - v.height) / 2), l.value = {
+          x1: Math.round(a.value.x1 * n) - y,
+          y1: Math.round(a.value.y1 * n) - C,
+          x2: Math.round(a.value.x2 * n) - y,
+          y2: Math.round(a.value.y2 * n) - C
+        }, H.value || (l.value.x1 = Math.max(l.value.x1, 0), l.value.y1 = Math.max(l.value.y1, 0), l.value.x2 = Math.min(l.value.x2, g.width), l.value.y2 = Math.min(l.value.y2, g.height));
+      }
+      return l.value;
+    }
+    function Re(e, l) {
+      if (u.value > 0) {
+        if (!i.value || e > u.value)
+          return u.value / e;
+      } else if (L.value > 0 && (!i.value || l > L.value))
+        return L.value / l;
+      return 1;
+    }
+    function qe() {
+      return Math.min(1, Math.max(0, $.value / 100));
+    }
+    function Ve(e) {
+      return e.toDataURL("image/" + R.value, qe());
+    }
+    function je() {
+      if (z.value && z.value && w.value != null) {
+        const e = Pe(), l = e.x2 - e.x1, n = e.y2 - e.y1, y = document.createElement("canvas");
+        y.width = l, y.height = n;
+        const C = y.getContext("2d");
+        if (C) {
+          k.value != null && (C.fillStyle = k.value, C.fillRect(0, 0, l, n));
+          const V = (m.value.scale || 1) * (m.value.flipH ? -1 : 1), Y = (m.value.scale || 1) * (m.value.flipV ? -1 : 1);
+          g.width && g.height && (C.setTransform(V, 0, 0, Y, g.width / 2, g.height / 2), C.translate(-e.x1 / V, -e.y1 / Y), C.rotate((m.value.rotate || 0) * Math.PI / 180), C.drawImage(w.value, -g.width / 2, -g.height / 2));
+          const T = {
+            width: l,
+            height: n,
+            imagePosition: e,
+            cropperPosition: {
+              ...a.value
+            }
+          };
+          H.value && (T.offsetImagePosition = Ne());
+          const te = Re(l, n);
+          return te !== 1 && (T.width = Math.round(l * te), T.height = b.value ? Math.round(T.width / x.value) : Math.round(n * te), s(y, T.width, T.height)), T.base64 = Ve(y), p.emit("imageCropped", T), T;
+        }
+      }
+      return null;
+    }
+    function se() {
+      B.value && je();
+    }
+    function be() {
+      const e = z.value;
+      if (e) {
+        if (!b.value)
+          a.value.x1 = 0, a.value.x2 = e.offsetWidth, a.value.y1 = 0, a.value.y2 = e.offsetHeight;
+        else if (e.offsetWidth / x.value < e.offsetHeight) {
+          a.value.x1 = 0, a.value.x2 = e.offsetWidth;
+          const l = e.offsetWidth / x.value;
+          a.value.y1 = (e.offsetHeight - l) / 2, a.value.y2 = a.value.y1 + l;
+        } else {
+          a.value.y1 = 0, a.value.y2 = e.offsetHeight;
+          const l = e.offsetHeight * x.value;
+          a.value.x1 = (e.offsetWidth - l) / 2, a.value.x2 = a.value.x1 + l;
+        }
+        se(), D.value = !0;
+      }
+    }
+    function Ce() {
+      ee > 40 ? (d.show({
+        showCloseButton: !1,
+        timeout: 3e3,
+        animate: "fadeIn",
+        toasts: [{
+          type: "string",
+          title: "提示",
+          msg: "图片加载超时，请重试"
+        }]
+      }), E = !0, I.value = !1, p.emit("loadImageFailed")) : Le() ? (E = !1, fe(), ce(), be(), p.emit("cropperReady", {
+        ...h.value
+      })) : (ee++, setTimeout(() => Ce(), 50));
+    }
+    function Oe() {
+      w.value != null && (I.value = !1, p.emit("imageLoaded"), ee = 0, setTimeout(() => Ce()));
+    }
+    function Qe() {
+      const e = z.value;
+      (h.value.width !== (e == null ? void 0 : e.offsetWidth) || h.value.height !== (e == null ? void 0 : e.offsetHeight)) && h.value.width && h.value.height && e && (a.value.x1 = a.value.x1 * e.offsetWidth / h.value.width, a.value.x2 = a.value.x2 * e.offsetWidth / h.value.width, a.value.y1 = a.value.y1 * e.offsetHeight / h.value.height, a.value.y2 = a.value.y2 * e.offsetHeight / h.value.height);
+    }
+    const $e = () => {
+      Qe(), fe(), ce();
+    }, Ae = () => {
+      clearTimeout(J), J = setTimeout($e, 300);
+    };
+    ta(() => {
+      window.addEventListener("resize", Ae), he.value && (ae(), I.value = !0, we(he.value));
+    }), la(() => {
+      window.removeEventListener("resize", Ae);
+    });
+    function Ie() {
+      o.active && (o.active = !1, se());
+    }
+    function ge(e) {
+      return (e.touches && e.touches[0] ? e.touches[0].clientX : e.clientX) || 0;
+    }
+    function de(e) {
+      return (e.touches && e.touches[0] ? e.touches[0].clientY : e.clientY) || 0;
+    }
+    function N(e, l, n = null) {
+      o && o.active || (e.preventDefault && e.preventDefault(), o = {
+        active: !0,
+        type: l,
+        position: n,
+        clientX: ge(e),
+        clientY: de(e),
+        ...a.value
+      });
+    }
+    function me(e = !1) {
+      a.value.x1 < 0 && (a.value.x2 -= e ? a.value.x1 : 0, a.value.x1 = 0), a.value.y1 < 0 && (a.value.y2 -= e ? a.value.y1 : 0, a.value.y1 = 0), a.value.x2 > h.value.width && (a.value.x1 -= e ? a.value.x2 - h.value.width : 0, a.value.x2 = h.value.width), a.value.y2 > h.value.height && (a.value.y1 -= e ? a.value.y2 - h.value.height : 0, a.value.y2 = h.value.height);
+    }
+    function Ke(e) {
+      const l = ge(e) - o.clientX, n = de(e) - o.clientY;
+      a.value.x1 = o.x1 + l, a.value.y1 = o.y1 + n, a.value.x2 = o.x2 + l, a.value.y2 = o.y2 + n;
+    }
+    const {
+      checkAspectRatio: Ge
+    } = na(a, h, x, o);
+    function Je(e) {
+      const l = ge(e) - o.clientX, n = de(e) - o.clientY;
+      switch (o.position) {
+        case "left":
+          a.value.x1 = Math.min(o.x1 + l, a.value.x2 - S);
+          break;
+        case "topleft":
+          a.value.x1 = Math.min(o.x1 + l, a.value.x2 - S), a.value.y1 = Math.min(o.y1 + n, a.value.y2 - U);
+          break;
+        case "top":
+          a.value.y1 = Math.min(o.y1 + n, a.value.y2 - U);
+          break;
+        case "topright":
+          a.value.x2 = Math.max(o.x2 + l, a.value.x1 + S), a.value.y1 = Math.min(o.y1 + n, a.value.y2 - U);
+          break;
+        case "right":
+          a.value.x2 = Math.max(o.x2 + l, a.value.x1 + S);
+          break;
+        case "bottomright":
+          a.value.x2 = Math.max(o.x2 + l, a.value.x1 + S), a.value.y2 = Math.max(o.y2 + n, a.value.y1 + U);
+          break;
+        case "bottom":
+          a.value.y2 = Math.max(o.y2 + n, a.value.y1 + U);
+          break;
+        case "bottomleft":
+          a.value.x1 = Math.min(o.x1 + l, a.value.x2 - S), a.value.y2 = Math.max(o.y2 + n, a.value.y1 + U);
+          break;
+        case "center":
+          const {
+            scale: y
+          } = e, C = Math.abs(o.x2 - o.x1) * y, V = Math.abs(o.y2 - o.y1) * y, {
+            x1: Y
+          } = a.value, {
+            y1: T
+          } = a.value;
+          a.value.x1 = Math.min(o.clientX - C / 2, a.value.x2 - S), a.value.y1 = Math.min(o.clientY - V / 2, a.value.y2 - U), a.value.x2 = Math.max(o.clientX + C / 2, Y + S), a.value.y2 = Math.max(o.clientY + V / 2, T + U);
+          break;
+      }
+      b.value && Ge();
+    }
+    function ze(e) {
+      o && o.active && (e.stopPropagation && e.stopPropagation(), e.preventDefault && e.preventDefault(), clearTimeout(G), G = setTimeout(() => {
+        o.type === oe.Move ? (Ke(e), me(!0)) : o.type === oe.Resize && (Je(e), me(!1));
+      }, 300));
+    }
+    return le(xe, (e) => {
+      ae(), e && e.target && e.target.files && e.target.files.length > 0 && (I.value = !0, pe(e.target.files[0]));
+    }), le(he, (e) => {
+      e ? (ae(), I.value = !0, we(e)) : (d.show({
+        showCloseButton: !1,
+        timeout: 3e3,
+        animate: "fadeIn",
+        toasts: [{
+          type: "string",
+          title: "提示",
+          msg: "图片路径为空"
+        }]
+      }), I.value = !1, E = !0);
+    }), le(We, (e) => {
+      ae(), I.value = !0, ve(e);
+    }), le(ke, (e) => {
+      ae(), e && (I.value = !0, pe(e));
+    }), le(() => [t.containWithinAspectRatio, t.canvasRotation, t.cropper, t.aspectRatio, t.transform, t.imageChangedEvent], ([e, l, n, y, C, V], [Y, T, te, Ze, Ye, Xe]) => {
+      M && M.complete && Q && (e !== Y || l !== T) && Me(), n !== te && (fe(), ce(), me(!1), se()), y !== Ze && D.value && be(), C !== Ye && (He(), se()), V !== Xe && (xe.value = V);
+    }), () => f("div", {
+      class: ["farris-image-cropper-frame", {
+        "farris-image-cropper-disabled": ie.value
+      }],
+      style: {
+        "text-align": q.value
+      },
+      onMousemove: W((e) => ze(e), ["prevent"]),
+      onTouchmove: W((e) => ze(e), ["prevent"]),
+      onMouseup: W(() => Ie(), ["prevent"]),
+      onTouchend: W(() => Ie(), ["prevent"])
+    }, [!E && f("div", {
+      ref: ue,
+      class: "farris-image-cropper",
+      style: [{
+        background: D.value ? k.value : ""
+      }]
+    }, [j.value && f("img", {
+      ref: z,
+      class: "farris-source-image",
+      style: [{
+        visibility: D.value ? "visible" : "hidden"
+      }, {
+        transform: O.value
+      }],
+      src: j.value,
+      onLoad: () => Oe()
+    }, null), h.value && f("div", {
+      class: "farris-image-overlay",
+      style: [{
+        width: `${h.value.width || 0}px`
+      }, {
+        height: `${h.value.height || 0}px`
+      }, {
+        "margin-left": q.value === "center" ? Z.value : ""
+      }]
+    }, null), D.value && f("div", {
+      class: ["farris-image-cropper-wrapper", {
+        "farris-image-cropper-rounded": re.value
+      }],
+      style: [{
+        top: `${a.value.y1}px`
+      }, {
+        left: `${a.value.x1}px`
+      }, {
+        width: `${a.value.x2 - a.value.x1}px`
+      }, {
+        height: `${a.value.y2 - a.value.y1}px`
+      }, {
+        visibility: D.value ? "visible" : "hidden"
+      }, {
+        "margin-left": q.value === "center" ? Z.value : ""
+      }],
+      tabindex: "0"
+    }, [f("div", {
+      class: "farris-image-cropper-move",
+      onMousedown: W((e) => N(e, P.Move, "topleft"), ["prevent"])
+    }, null), !_.value && f("div", null, [f("span", {
+      class: "farris-image-cropper-resize topleft",
+      onMousedown: W((e) => N(e, P.Resize, "topleft"), ["prevent"])
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize top"
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize topright",
+      onMousedown: W((e) => N(e, P.Resize, "topright"), ["prevent"])
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize right"
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize bottomright",
+      onMousedown: W((e) => N(e, P.Resize, "bottomright"), ["prevent"])
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize bottom"
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize bottomleft",
+      onMousedown: W((e) => N(e, P.Resize, "bottomleft"), ["prevent"])
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize left"
+    }, [f("span", {
+      class: "farris-image-cropper-square"
+    }, null)]), f("span", {
+      class: "farris-image-cropper-resize-bar top",
+      onMousedown: W((e) => N(e, P.Resize, "top"), ["prevent"])
+    }, null), f("span", {
+      class: "farris-image-cropper-resize-bar right",
+      onMousedown: W((e) => N(e, P.Resize, "right"), ["prevent"])
+    }, null), f("span", {
+      class: "farris-image-cropper-resize-bar bottom",
+      onMousedown: W((e) => N(e, P.Resize, "bottom"), ["prevent"])
+    }, null), f("span", {
+      class: "farris-image-cropper-resize-bar left",
+      onMousedown: W((e) => N(e, P.Resize, "left"), ["prevent"])
+    }, null)])])]), I.value && f("div", {
+      class: "farris-image-cropper-loading"
+    }, [f("div", {
+      class: "farris-image-cropper-loading-spinner"
+    }, null)]), E && f("div", {
+      class: "farris-image-cropper-error"
+    }, [K.value])]);
+  }
+}), oa = {
+  install(t) {
+    t.component(Te.name, Te);
+  }
+};
+export {
+  Te as ImageCropper,
+  oa as default,
+  ia as imageCropperProps
+};