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

Vue Watermark

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var u=require("vue");const y={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"}},G="vue-watermark-options",E=3,X=2,I=u.defineComponent({name:"Watermark",props:{options:{type:Object,default:{}}},setup(f,w){const k=u.reactive({...y,...f.options,font:{...y.font,...f.options?.font}}),{width:O,height:P,content:m,gap:F,offset:z,image:Y,zIndex:M,rotate:A}=u.toRefs(k),s=window.devicePixelRatio||1,[v,$]=u.toRefs(F.value),[R,x]=[v.value/2,$.value/2],W=u.ref(),h=u.ref(),i=t=>`${t}px`,N=t=>{const{fontSize:e,fontFamily:o}=k.font;let[n,r]=[120,64];if(!Y&&t.measureText){t.font=`${Number(e)}px ${o}`;const a=Array.isArray(m.value)?m.value:[m.value],l=a.map(d=>t.measureText(d).width);n=Math.ceil(Math.max(...l)),r=Number(e)*a.length+(a.length-1)*E}return[O.value??n,P.value??r]},T=(t,e,o,n,r)=>{const{fontSize:a,fontFamily:l,fontStyle:d,color:g,fontWeight:b}=k.font,p=Number(a)*s;t.font=`${d} normal ${b} ${i(p)}/${i(r)} ${l}`,t.fillStyle=g,t.textAlign="center",t.textBaseline="top",t.translate(n/2,0),(Array.isArray(m.value)?m.value:[m.value])?.forEach((S,_)=>{o+=_*(p+E*s),t.fillText(S??"",e,o)})},q=t=>Object.keys(t).map(e=>`${e.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${t[e]};`).join(" "),H=()=>{const t={zIndex:M.value,position:"absolute",left:"0",top:"0",width:"100%",height:"100%",pointerEvents:"none",backgroundRepeat:"repeat",backgroundPosition:"unset"};let e=z.value?.[0]??R-R,o=z.value?.[1]??x-x;return e>0&&(t.left=`${i(e)}`,t.width=`calc(100% - ${i(e)})`,e=0),o>0&&(t.top=`${i(o)}`,t.height=`calc(100% - ${i(o)})`,o=0),t.backgroundPosition=`${i(e)} ${i(o)}`,t},L=(t,e)=>{W.value&&h.value&&(h.value.setAttribute("style",q({...H(),backgroundImage:`url('${t}')`,backgroundSize:`${i((v.value+e)*X)}`})),W.value.append(h.value))},j=(t,e,o,n)=>{t.translate(e,o),t.rotate(Math.PI/180*Number(n)),t.translate(-e,-o)},B=(t,e,o,n,r,a,l)=>{T(e,a.drawX,a.drawY,o,n),e.restore(),j(e,l.rotateX,l.rotateY,A.value),T(e,l.drawX,l.drawY,o,n),L(t.toDataURL(),r)};return u.watch(()=>f.options,()=>{Object.assign(k,{...y,...f.options,font:{...y.font,...f.options?.font}})},{deep:!0,immediate:!0}),()=>{const t=w.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}`);const e=()=>{const o=t[0],n=document.createElement("canvas"),r=n.getContext("2d");if(r){h.value||(h.value=document.createElement("div"));const[a,l]=N(r),d=(v.value+a)*s,g=($.value+l)*s,b=a*s,p=l*s;n.setAttribute("width",`${i(d*X)}`),n.setAttribute("height",`${i(g*X)}`);const c={drawX:v.value*s/2,drawY:$.value*s/2,rotateX:(b+v.value*s)/2,rotateY:(p+$.value*s)/2},S={drawX:c.drawX+d,drawY:c.drawY+g,rotateX:c.rotateX+d,rotateY:c.rotateY+g};r.save(),j(r,c.rotateX,c.rotateY,A.value),Y.value||B(n,r,b,p,a,c,S)}return u.h("div",{ref:W,style:{position:"relative"}},[o])};return e(),u.h("div",{},e())}}});function U(f={}){return{install(w){w.provide(G,f),w.component("Watermark",I)}}}exports.Watermark=I,exports.default=U;