btt-ui 1.0.0

package/es/src/sign/src/sign.mjs

@@ -0,0 +1,137 @@
+import { defineComponent as C, ref as Y, reactive as q, onMounted as L, openBlock as W, createElementBlock as F, normalizeStyle as E, withModifiers as p } from "vue";
+const O = C({
+  name: "k-sign"
+}), z = C({
+  ...O,
+  props: {
+    width: { default: 600 },
+    height: { default: 300 },
+    bgColor: { default: "#ebebeb" },
+    lineWidth: { default: 5 },
+    lineColor: { default: "#000000" },
+    gapLeft: { default: 5 },
+    gapRight: { default: 5 },
+    gapTop: { default: 5 },
+    gapBottom: { default: 5 },
+    format: { default: "" },
+    quality: { default: "0.92" },
+    direction: { default: 0 },
+    isCrop: { type: Boolean, default: !0 }
+  },
+  emits: ["change"],
+  setup(b, { expose: M, emit: I }) {
+    const r = Y(), a = b, m = I, t = q({
+      sratio: 1,
+      ctx: null,
+      resImg: "",
+      isMove: !1,
+      lastX: 0,
+      lastY: 0,
+      offset: { left: 0, top: 0 }
+    }), T = () => {
+      const o = a.height / a.width;
+      t.ctx = r.value.getContext("2d", { willReadFrequently: !0 }), t.offset = r.value.getBoundingClientRect(), r.value.height = a.height, r.value.width = a.width, r.value.style.width = a.width > window.innerWidth ? window.innerWidth + "px" : a.width + "px";
+      const c = parseFloat(window.getComputedStyle(r.value).width);
+      r.value.style.height = o * c + "px", r.value.style.background = a.bgColor, t.ctx.scale(1 * t.sratio, 1 * t.sratio), t.sratio = c / a.width, t.ctx.scale(1 / t.sratio, 1 / t.sratio);
+    }, f = (o, c, u) => {
+      u && (t.ctx.beginPath(), t.ctx.lineWidth = a.lineWidth, t.ctx.strokeStyle = a.lineColor, t.ctx.lineCap = "round", t.ctx.lineJoin = "round", t.ctx.moveTo(t.lastX, t.lastY), t.ctx.lineTo(o, c), t.ctx.stroke(), t.ctx.closePath()), t.lastX = o, t.lastY = c;
+    }, k = (o) => {
+      t.isMove = !0, f(o.pageX - t.offset.left, o.pageY - t.offset.top, !1);
+    }, D = (o) => {
+      t.isMove && f(o.pageX - t.offset.left, o.pageY - t.offset.top, !0);
+    }, x = async () => {
+      t.isMove = !1;
+      let o = await w();
+      m("change", o);
+    }, _ = (o) => {
+      t.isMove = !0, f(
+        o.changedTouches[0].clientX - t.offset.left,
+        o.changedTouches[0].clientY - t.offset.top,
+        !1
+      );
+    }, R = (o) => {
+      t.isMove && f(
+        o.changedTouches[0].clientX - t.offset.left,
+        o.changedTouches[0].clientY - t.offset.top,
+        !0
+      );
+    }, v = () => {
+      t.isMove = !1;
+    }, B = (o) => {
+      let c = r.value.width, u = r.value.height, h = 0, l = 0;
+      for (let i = 0; i < r.value.width; i++)
+        for (let n = 0; n < r.value.height; n++) {
+          let e = (i + r.value.width * n) * 4;
+          (o[e] > 0 || o[e + 1] > 0 || o[e + 2] || o[e + 3] > 0) && (l = Math.max(n, l), h = Math.max(i, h), u = Math.min(n, u), c = Math.min(i, c));
+        }
+      return c++, h++, u++, l++, [
+        c - a.gapLeft,
+        u - a.gapTop,
+        h + a.gapRight,
+        l + a.gapBottom
+      ];
+    }, P = (o, c, u) => new Promise((h) => {
+      const l = document.createElement("canvas"), g = l.getContext("2d");
+      let i, n, e;
+      c % 90 != 0 && console.error("\u65CB\u8F6C\u89D2\u5EA6\u5FC5\u987B\u662F90\u7684\u500D\u6570!");
+      const y = c / 90 % 4, s = { sx: 0, sy: 0, ex: 0, ey: 0 }, d = new Image();
+      d.crossOrigin = "anonymous", d.src = o, d.onload = function() {
+        switch (i = d.width, n = d.height, e = i > n ? i : n, l.width = e * 2, l.height = e * 2, y) {
+          case 0:
+            s.sx = e, s.sy = e, s.ex = e + i, s.ey = e + n;
+            break;
+          case 1:
+            s.sx = e - n, s.sy = e, s.ex = e, s.ey = e + i;
+            break;
+          case 2:
+            s.sx = e - i, s.sy = e - n, s.ex = e, s.ey = e;
+            break;
+          case 3:
+            s.sx = e, s.sy = e - i, s.ex = e + n, s.ey = e + i;
+            break;
+        }
+        g.translate(e, e), g.rotate(c * Math.PI / 180), g.drawImage(d, 0, 0);
+        var X = g.getImageData(s.sx, s.sy, s.ex, s.ey);
+        y % 2 == 0 ? (l.width = i, l.height = n) : (l.width = n, l.height = i), g.putImageData(X, 0, 0), h(l.toDataURL(u, a.quality));
+      };
+    }), w = () => new Promise((o) => {
+      const c = t.ctx.getImageData(0, 0, r.value.width, r.value.height), u = B(c.data), h = document.createElement("canvas"), l = h.getContext("2d");
+      h.width = u[2] - u[0], h.height = u[3] - u[1];
+      const g = t.ctx.getImageData(...u);
+      l.globalCompositeOperation = "destination-over", l.putImageData(g, 0, 0), l.fillStyle = a.bgColor, l.fillRect(0, 0, h.width, h.height);
+      let i = "image/" + a.format, n = h.toDataURL(i, a.quality);
+      if (!a.isCrop) {
+        const e = r.value;
+        t.ctx.globalCompositeOperation = "destination-over", t.ctx.fillStyle = a.bgColor, t.ctx.fillRect(0, 0, e.width, e.height), n = e.toDataURL(i, a.quality), t.ctx.clearRect(0, 0, e.width, e.height), t.ctx.putImageData(c, 0, 0), t.ctx.globalCompositeOperation = "source-over";
+      }
+      a.direction > 0 && a.direction % 90 == 0 ? P(n, a.direction, i).then((e) => {
+        o(e);
+      }) : o(n);
+    }), S = () => {
+      t.ctx.beginPath(), t.ctx.clearRect(0, 0, a.width, a.height), t.ctx.closePath(), setTimeout(() => {
+        m("change", "");
+      }, 1e3);
+    };
+    return L(() => {
+      setTimeout(T, 100);
+    }), M({
+      clearCanvas: S,
+      createImg: w
+    }), (o, c) => (W(), F("canvas", {
+      ref_key: "vueSign",
+      ref: r,
+      style: E({ background: o.bgColor }),
+      onMousedown: k,
+      onMousemove: D,
+      onMouseup: x,
+      onMouseleave: x,
+      onTouchstart: p(_, ["stop"]),
+      onTouchmove: p(R, ["stop"]),
+      onTouchend: p(v, ["stop"]),
+      onTouchcancel: p(v, ["stop"])
+    }, null, 36));
+  }
+});
+export {
+  z as default
+};