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

Vue Watermark

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