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

Vue Watermark

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