am-watermark/dist/index.js

一款Vue3的水印组件、支持指令和组件使用

import { defineComponent as L, computed as R, openBlock as z, createElementBlock as M, createElementVNode as f, normalizeStyle as u, renderSlot as T } from "vue";
const W = (t) => {
  const o = (
    //@ts-ignore
    t.backingStorePixelRatio || //@ts-ignore
    t.webkitBackingStorePixelRatio || //@ts-ignore
    t.mozBackingStorePixelRatio || //@ts-ignore
    t.msBackingStorePixelRatio || //@ts-ignore
    t.oBackingStorePixelRatio || //@ts-ignore
    t.backingStorePixelRatio || 1
  );
  return (window.devicePixelRatio || 1) / o;
}, g = (t, o) => {
  const a = document.createElement("canvas"), e = a.getContext("2d");
  if (!e)
    return "";
  const n = W(e), { width: i, height: s, fontSize: r, fontFamily: k, fontWidth: h, fontColor: x, offsetLeft: c, offsetTop: v, gapX: m, gapY: p, rotate: w } = Object.assign(o), y = (m + i) * n + "px", b = (p + s) * n + "px";
  a.setAttribute("width", y), a.setAttribute("height", b);
  const S = v ? c : m / 2, _ = c || p / 2;
  if (e) {
    e.translate(S * n, _ * n), e.rotate(Math.PI / 180 * (w || 0));
    const $ = r * n, P = s * n;
    return e.font = ` ${h}  ${$}px/${P}px ${k}`, e.fillStyle = x, e.fillText(t, 10, 10), a.toDataURL("image/png", 1);
  }
  return a.toDataURL();
}, l = {
  width: 120,
  height: 64,
  fontSize: 16,
  fontFamily: "Arial",
  fontColor: "rgba(0,0,0,0.3)",
  fontWidth: 400,
  offsetLeft: 0,
  offsetTop: 0,
  gapX: 212,
  gapY: 222,
  rotate: 0,
  conentZ: 10
};
const B = (t) => {
  t.directive("watermark", {
    mounted(o, a) {
      const { value: e } = a;
      if (!e.text)
        return console.warn("watermark value is empty");
      o.classList.add("am-watermark");
      const n = Object.assign({}, l, e == null ? void 0 : e.options), i = document.createElement("div");
      i.classList.add("am-watermark-content"), i.style.zIndex = `${n.conentZ}`, i.innerHTML = o.innerHTML, o.innerHTML = "", o.appendChild(i);
      const s = g(e.text, n);
      o.style.position = "relative";
      const r = document.createElement("div");
      r.className = "am-watermark-bg", r.style.backgroundImage = `url(${s})`, r.style.backgroundSize = `${n.width + n.gapX}px `, o.appendChild(r);
    }
  });
}, C = L({
  name: "WaterMark",
  props: {
    text: {
      type: String,
      default: "水印"
    },
    options: {
      type: Object,
      default: () => l
    }
  },
  setup(t) {
    const o = R(() => ({
      ...l,
      ...t.options
    }));
    return {
      url: g(t.text, o.value),
      options: o
    };
  }
});
const I = (t, o) => {
  const a = t.__vccOpts || t;
  for (const [e, n] of o)
    a[e] = n;
  return a;
}, E = { class: "am-watermark" };
function H(t, o, a, e, n, i) {
  return z(), M("div", E, [
    f("div", {
      class: "am-watermark-content",
      style: u({
        zIndex: t.options.conentZ
      })
    }, [
      T(t.$slots, "default")
    ], 4),
    f("div", {
      class: "am-watermark-bg",
      style: u({
        backgroundImage: `url(${t.url})`,
        backgroundSize: `${t.options.width + t.options.gapX}px`
      })
    }, null, 4)
  ]);
}
const d = /* @__PURE__ */ I(C, [["render", H]]), X = d, j = {
  install: (t) => {
    t.component(d.name, d), B(t);
  }
};
export {
  X as WaterMark,
  j as default
};