ideaz-element/es/element/watermark/src/index.mjs

<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>

import { defineComponent as M, ref as U, onMounted as Y, createVNode as P } from "vue";
import "../../../utils/index.mjs";
import { watermarkProps as D } from "./watermark.mjs";
import { useNamespace as F } from "../../../hooks/useNamespace.mjs";
import { useLocale as V } from "../../../hooks/useLocale.mjs";
import { convertToPx as e } from "../../../utils/string.mjs";
const Z = (t) => {
  if (!t) return 1;
  const s = t.backingStorePixelRatio || t.webkitBackingStorePixelRatio || t.mozBackingStorePixelRatio || t.msBackingStorePixelRatio || t.oBackingStorePixelRatio || t.backingStorePixelRatio || 1;
  return (window.devicePixelRatio || 1) / s;
}, tt = /* @__PURE__ */ M({
  name: "ZWatermark",
  props: D,
  setup(t, {
    slots: s
  }) {
    const R = F("watermark"), {
      t: y
    } = V(), p = U("");
    return Y(() => {
      const {
        gapX: l = 212,
        gapY: m = 222,
        width: g = 120,
        height: d = 64,
        rotate: u = -22,
        // default -22
        image: c,
        content: a,
        offsetLeft: h,
        offsetTop: k,
        fontStyle: f = "normal",
        fontWeight: $ = "normal",
        fontColor: z = "rgba(0,0,0,.15)",
        fontSize: L = 16,
        fontFamily: N = "sans-serif"
      } = t, b = e(d), v = e(g), T = e(L), W = e(u), w = e(m), x = e(l), I = e(h || 0), X = e(k || 0), n = document.createElement("canvas"), o = n.getContext("2d"), r = Z(o), O = `${(x + v) * r}px`, A = `${(w + b) * r}px`, B = I || x / 2, C = X || w / 2;
      if (n.setAttribute("width", O), n.setAttribute("height", A), o) {
        o.translate(B * r, C * r), o.rotate(Math.PI / 180 * Number(W));
        const E = v * r, S = b * r;
        if (c) {
          const i = new Image();
          i.crossOrigin = "anonymous", i.referrerPolicy = "no-referrer", i.src = c, i.onload = () => {
            o.drawImage(i, 0, 0, E, S), p.value = n.toDataURL();
          };
        } else if (a) {
          const i = Number(T) * r;
          o.font = `${f} normal ${$} ${i}px/${S}px ${N}`, o.fillStyle = z, Array.isArray(a) ? a == null || a.forEach((G, H) => {
            o.fillText(G, 0, H * 50);
          }) : o.fillText(a, 0, 0), p.value = n.toDataURL();
        }
      } else
        console.error(y("watermark.tip"));
    }), () => {
      var f;
      const {
        style: l,
        markStyle: m,
        zIndex: g = 9,
        gapX: d = 212,
        width: u = 120,
        markClassName: c,
        className: a
      } = t, h = e(u), k = e(d);
      return P("div", {
        style: {
          position: "relative",
          ...l
        },
        class: [R.b("wrapper"), a]
      }, [(f = s.default) == null ? void 0 : f.call(s), P("div", {
        class: c,
        style: {
          zIndex: Number(g),
          position: "absolute",
          left: 0,
          top: 0,
          width: "100%",
          height: "100%",
          backgroundSize: `${k + h}px`,
          pointerEvents: "none",
          backgroundRepeat: "repeat",
          ...p.value ? {
            backgroundImage: `url('${p.value}')`
          } : {},
          ...m
        }
      }, null)]);
    };
  }
});
export {
  tt as default
};
//# sourceMappingURL=index.mjs.map