gao-watermark/lib/gao-watermark.umd.js

```bash npm install gao-watermark --save-dev ```

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["gao-watermark"]={},e.Vue)}(this,(function(e,t){"use strict";const o={color:"#ccc",fontSize:14,text:"watermark",rotate:45,gap:50},a=async e=>{let t={...o,...e},a=document.createElement("canvas"),n=a.getContext("2d");return await r(a,n,t),t.image?await function(e,t,o){return new Promise((a=>{const r=new Image;r.src=o.image,r.setAttribute("crossOrigin","anonymous"),r.onload=()=>{const n=Math.cos(o.rotate)*r.width*1.5,i=Math.sin(o.rotate)*r.width*1.5||r.height;e.width=Math.abs(n),e.height=Math.abs(i),t.translate(e.width/2,e.height/2),t.rotate(Math.PI/180*o.rotate),t.drawImage(r,-r.width/2,-r.height/2,r.width,r.height),a(null)},r.onerror=e=>{throw Error("图片加载失败")}}))}(a,n,t):await r(a,n,t),Promise.resolve({base64:a.toDataURL(),size:{width:a.width,height:a.height}})};function r(e,t,o){let a=o.fontSize*window.devicePixelRatio;t.font=`${a}px Arial`;let r=Array.isArray(o.text)?o.text:[o.text],n=Math.max(...r.map((e=>t.measureText(e).width))),i=n*Math.cos(Math.PI/4)+r.length*a,l=0,s=0;return Array.isArray(o.gap)?(l=Math.min(i,n)+o.gap[0]*devicePixelRatio,s=Math.min(i,n)+o.gap[1]*devicePixelRatio):s=l=Math.min(i,n)+o.gap*devicePixelRatio,e.width=l,e.height=s,t.translate(l/2,s/2),t.rotate(Math.PI/180*-o.rotate),t.fillStyle=o.color,t.font=`${a}px Arial`,t.textBaseline="middle",t.textAlign="center",r.forEach(((e,o)=>{let n=o-r.length/2+.5;t.fillText(e,0,n*a)})),Promise.resolve()}const n=t.defineComponent({__name:"water-mark",props:{text:{},fontSize:{},color:{},gap:{},zIndex:{},rotate:{},image:{}},setup(e){let o=t.getCurrentInstance();const r={fontSize:20,color:"rgba(0, 0, 0, .2)",text:"WaterMark",gap:50,rotate:45,zIndex:9999},n=e;let i=o.appContext.config.globalProperties._watermark_config||{},l={...r};Object.keys(n).forEach((e=>{const t=e,o=n[t],a=null==i?void 0:i[t],s=r[t];l[t]=void 0!==o?o:a??s}));const s=t.ref(null);let c="",d={width:0,height:0},h=null;const u=()=>{s.value&&(h&&h.remove(),h=document.createElement("div"),h.style.position="absolute",h.style.inset="0",h.style.pointerEvents="none",h.style.zIndex=String(l.zIndex),h.style.backgroundImage=`url(${c})`,h.style.backgroundSize=`${d.width}px ${d.height}px`,h.style.backgroundRepeat="repeat",s.value.appendChild(h))};let g=new MutationObserver((e=>{for(const t of e){for(const e of t.removedNodes)e===h&&u();t.target===h&&u()}}));return t.onMounted((async()=>{let e=await a(l);c=e.base64,d=e.size,u(),g.observe(s.value,{attributes:!0,childList:!0,subtree:!0})})),t.onUnmounted((()=>{g.disconnect()})),(e,o)=>(t.openBlock(),t.createElementBlock("div",{style:{position:"relative"},ref_key:"parentRef",ref:s},[t.renderSlot(e.$slots,"default")],512))}});e.GaoWatermark=n,e.default=(e,t)=>{e.config.globalProperties._watermark_config=t||{},e.component("GaoWatermark",n)},Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));