@zzjiaxiang/vue-watermark/bundle-es-min.js

A watermark Component for Vue3

import{ref as e,watch as t,onMounted as a,openBlock as r,createElementBlock as n,renderSlot as o,nextTick as l}from"vue";function i(){return window.devicePixelRatio||1}var u=Object.assign({name:"WaterMark"},{__name:"water-mark",props:{show:{type:Boolean,default:!0},gapX:{type:Number,default:200},gapY:{type:Number,default:200},zIndex:{type:Number,default:1},width:{type:Number,default:120},height:{type:Number,default:64},rotate:{type:Number,default:-22},image:{type:String,default:""},imageWidth:{type:Number,default:120},imageHeight:{type:Number,default:64},content:{type:[String,Array],default:""},fontColor:{type:String,default:"rgba(0,0,0,.15)"},fontStyle:{type:String,default:"normal"},fontFamily:{type:String,default:"sans-serif"},fontWeight:{type:String,default:"normal"},fontSize:{type:[String,Number],default:16}},setup(u){const s=u,f=e(null),m=e(null),p=e(!1),d=(e,t)=>{var a;f.value&&m.value&&(p.value=!0,m.value.setAttribute("style",(a={position:"absolute",inset:0,width:"100%",height:"100%",pointerEvents:"none",zIndex:s.zIndex,backgroundImage:`url(${e})`,backgroundSize:`${s.gapX+t}px`},Object.keys(a).map((e=>`${function(e){return e.replace(/([A-Z])/g,(e=>`-${e}`)).toLowerCase()}(e)}: ${a[e]};`)).join(" "))),f.value?.append(m.value),l((()=>{p.value=!1})))},c=(e,t,a,r,n,o,l)=>{const u=i(),f=Number(s.fontSize)*u;e.font=`${s.fontStyle} normal ${s.fontWeight} ${f}px/${n}px ${s.fontFamily}`,e.fillStyle=s.fontColor,e.textAlign="center",e.textBaseline="top",e.translate(r/2,0);const m=Array.isArray(s.content)?s.content:[s.content];m?.forEach(((r,n)=>{e.fillText(r??"",t,a+n*(f+3*u))})),d(o.toDataURL(),l)},g=()=>{if(!s.show)return;const e=document.createElement("canvas"),t=e.getContext("2d");if(t){m.value||(m.value=document.createElement("div"));const a=i(),[r,n]=(e=>{let t=120,a=64;if(e.measureText){e.font=`${Number(s.fontSize)}px ${s.fontFamily}`;const r=Array.isArray(s.content)?s.content:[s.content],n=r.map((t=>e.measureText(t).width));t=Math.ceil(Math.max(...n)),a=Number(s.fontSize)*r.length}return[t,a]})(t),o=(s.gapX+r)*a+"px",l=(s.gapY+n)*a+"px";e.setAttribute("width",o),e.setAttribute("height",l);const u=s.gapX*a/2,f=s.gapY*a/2,p=r*a,g=n*a,y=(p+s.gapX*a)/2,v=(g+s.gapY*a)/2;if(function(e,t,a,r){e.translate(t,a),e.rotate(Math.PI/180*Number(r)),e.translate(-t,-a)}(t,y,v,s.rotate),s.image){const a=new Image;a.crossOrigin="anonymous",a.referrerPolicy="no-referrer",a.src=s.image,a.onload=()=>{t.drawImage(a,u,f,p,g),d(e.toDataURL(),r)},a.onerror=()=>{c(t,u,f,p,g,e,r)}}else c(t,u,f,p,g,e,r);t.restore()}},y=e=>{((e,t)=>{const a={subtree:!0,childList:!0,attributeFilter:["style","class"]};e&&"MutationObserver"in window&&new MutationObserver(t).observe(e,a)})(e,(e=>{p.value||e.forEach((e=>{((e,t)=>{let a=!1;return e.removedNodes.length&&(a=Array.from(e.removedNodes).includes(t)),"attributes"===e.type&&e.target===t&&(a=!0),a})(e,m.value)&&(m.value&&(m.value.remove(),m.value=null),g())}))}))};return t(s,(()=>g()),{deep:!0}),a((()=>{g(),y(f.value)})),(e,t)=>(r(),n("div",{ref_key:"markWrap",ref:f,style:{position:"relative"}},[o(e.$slots,"default")],512))}});u.__file="src/package/components/water-mark/src/water-mark.vue",u.install=e=>{e.component(u.name,u)};export{u as default};