@kousum/vue-watermark/dist/index.mjs

Vue Watermark

var tt=Object.defineProperty;var n=(i,f)=>tt(i,"name",{value:f,configurable:!0});import{watch as R,nextTick as T,defineComponent as et,ref as B,reactive as ot,toRefs as H,shallowRef as U,onMounted as nt,h as F}from"vue";const X={width:null,height:null,content:null,image:null,gap:[20,20],offset:[null,null],zIndex:5,rotate:-20,font:{color:"rgba(0,0,0,.2)",fontSize:18,fontWeight:"normal",fontStyle:"normal",fontFamily:"sans-serif"}},rt="vue-watermark-options",q=3,I=2;function at(i,f,$){let d,k;function W(){T(()=>{S(),O()})}n(W,"startWatch");function g(){d.disconnect(),k?.disconnect()}n(g,"disconnectAll");function O(){const m=i.value;if(m){const w={childList:!0},b=n(function(a,v){for(const p of a)p.type==="childList"&&(v.disconnect(),k?.disconnect(),$(),T(()=>{W()}))},"callback");d=new MutationObserver(b),d.observe(m,w)}}n(O,"startObserverFn");function S(){const m=f.value;if(m){const w={attributes:!0},b=n(function(a,v){for(const p of a)p.type==="attributes"&&(v.disconnect(),d.disconnect(),$(),T(()=>{W()}))},"callback");k=new MutationObserver(b),k.observe(m,w)}}return n(S,"selfCheck"),R([i,f],([m,w])=>{m&&w&&!d&&(O(),S())}),{startWatch:W,disconnectAll:g}}n(at,"useObserver");const D=et({name:"Watermark",props:{options:{type:Object,default:{}}},setup(i,f){const $=B([Symbol("watermarkDom")]),d=ot({...X,...i.options,font:{...X.font,...i.options?.font}}),{width:k,height:W,content:g,gap:O,offset:S,image:m,zIndex:w,rotate:b}=H(d),a=window.devicePixelRatio||1,[v,p]=H(O.value),[M,N]=[v.value/2,p.value/2],z=U(),Y=U(),E=B({}),{startWatch:G,disconnectAll:J}=at(z,Y,()=>A()),c=n(t=>`${t}px`,"appendPixel"),K=n(t=>{const{fontSize:e,fontFamily:o}=d.font;let[r,l]=[120,64];if(!m&&t.measureText){t.font=`${Number(e)}px ${o}`;const s=Array.isArray(g.value)?g.value:[g.value],u=s.map(y=>t.measureText(y).width);r=Math.ceil(Math.max(...u)),l=Number(e)*s.length+(s.length-1)*q}return[k.value??r,W.value??l]},"getWatermarkSize"),L=n((t,e,o,r,l)=>{const{fontSize:s,fontFamily:u,fontStyle:y,color:h,fontWeight:x}=d.font,j=Number(s)*a;t.font=`${y} normal ${x} ${c(j)}/${c(l)} ${u}`,t.fillStyle=h,t.textAlign="center",t.textBaseline="top",t.translate(r/2,0),(Array.isArray(g.value)?g.value:[g.value])?.forEach((_,C)=>{o+=C*(j+q*a),t.fillText(_??"",e,o)})},"fillTexts"),Q=n(()=>{const t={zIndex:w.value,position:"absolute",left:"0",top:"0",width:"100%",height:"100%",pointerEvents:"none",backgroundRepeat:"repeat",backgroundPosition:"unset"};let e=S.value?.[0]??M-M,o=S.value?.[1]??N-N;return e>0&&(t.left=`${c(e)}`,t.width=`calc(100% - ${c(e)})`,e=0),o>0&&(t.top=`${c(o)}`,t.height=`calc(100% - ${c(o)})`,o=0),t.backgroundPosition=`${c(e)} ${c(o)}`,t},"getWatermarkStyle"),V=n((t,e)=>{if(z.value&&Y.value){let o=n(function(r){E.value={...Q(),backgroundImage:`url('${r}')`,backgroundSize:`${c((v.value+e)*I)}`},$.value=[Symbol("watermarkDom")]},"setUrl2");t.toBlob(r=>{if(r){const l=URL.createObjectURL(r);J(),o(l),G()}})}},"addWatermark"),P=n((t,e,o,r)=>{t.translate(e,o),t.rotate(Math.PI/180*Number(r)),t.translate(-e,-o)},"rotateWatermark"),Z=n((t,e,o,r,l,s,u)=>{L(e,s.drawX,s.drawY,o,r),e.restore(),P(e,u.rotateX,u.rotateY,b.value),L(e,u.drawX,u.drawY,o,r),V(t,l)},"drawText");R(()=>i.options,()=>{Object.assign(d,{...X,...i.options,font:{...X.font,...i.options?.font}})},{deep:!0,immediate:!0});function A(){const t=document.createElement("canvas"),e=t.getContext("2d");if(e){const[o,r]=K(e),l=(v.value+o)*a,s=(p.value+r)*a,u=o*a,y=r*a;t.setAttribute("width",`${c(l*I)}`),t.setAttribute("height",`${c(s*I)}`);const h={drawX:v.value*a/2,drawY:p.value*a/2,rotateX:(u+v.value*a)/2,rotateY:(y+p.value*a)/2},x={drawX:h.drawX+l,drawY:h.drawY+s,rotateX:h.rotateX+l,rotateY:h.rotateY+s};e.save(),P(e,h.rotateX,h.rotateY,b.value),m.value||Z(t,e,u,y,o,h,x)}}return n(A,"renderWatermark"),nt(()=>{A()}),R(()=>i.options,()=>{A()},{deep:!0}),()=>{const t=f.slots.default?.();if(!t)throw new Error("@watermarkify: Slot is required to use <Watermark>");if(t.length!==1)throw new Error(`@watermarkify: <Watermark> requires exactly one slot, but got ${t.length}`);return F("div",{},F("div",{ref:z,style:{position:"relative"}},[f.slots.default?.(),$.value.map(e=>F("div",{ref:Y,style:E.value,key:e}))]))}}});function it(i={}){return{install(f){f.provide(rt,i),f.component("Watermark",D)}}}n(it,"WatermarkPlugin");export{D as Watermark,it as default};