invisible-watermark-vue/dist/index.cjs

A TypeScript library for creating and detecting invisible watermarks using Canvas API, with Vue 3 support

var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`vue`);c=s(c);var l=class{constructor(){this.canvas=null,this.ctx=null,this.container=null,this.currentText=``,this.defaultOptions={text:``,opacity:.005,fontSize:20,fontFamily:`Arial`,rotate:-15,color:`0, 0, 0`,spacingX:1,spacingY:1.5},this.currentOptions={...this.defaultOptions}}initCanvas(e){let t=e.querySelector(`.invisible-watermark-canvas`);t||(t=document.createElement(`canvas`),t.className=`invisible-watermark-canvas`,t.style.position=`absolute`,t.style.top=`0`,t.style.left=`0`,t.style.width=`100%`,t.style.height=`100%`,t.style.pointerEvents=`none`,t.style.zIndex=`9999`,window.getComputedStyle(e).position===`static`&&(e.style.position=`relative`),e.appendChild(t)),this.canvas=t,this.ctx=t.getContext(`2d`),this.container=e}drawWatermark(){if(!this.canvas||!this.ctx||!this.container)throw Error(`Canvas not initialized. Call apply() first.`);let{opacity:e,fontSize:t,fontFamily:n,rotate:r,color:i,spacingX:a,spacingY:o}=this.currentOptions,s=window.devicePixelRatio||1;this.canvas.width=this.container.offsetWidth*s,this.canvas.height=this.container.offsetHeight*s,this.canvas.style.width=`${this.container.offsetWidth}px`,this.canvas.style.height=`${this.container.offsetHeight}px`,this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.scale(s,s),this.ctx.font=`${t}px ${n}`,this.ctx.fillStyle=`rgba(${i}, ${e})`,this.ctx.textAlign=`center`,this.ctx.textBaseline=`middle`;let c=this.ctx.measureText(this.currentText).width*a,l=t*o,u=Math.ceil(this.container.offsetWidth/c)+2,d=Math.ceil(this.container.offsetHeight/l)+2;this.ctx.save(),this.ctx.translate(this.container.offsetWidth/2,this.container.offsetHeight/2),this.ctx.rotate(r*Math.PI/180),this.ctx.translate(-this.container.offsetWidth/2,-this.container.offsetHeight/2);for(let e=0;e<d;e++)for(let t=0;t<u;t++){let n=t*c-c,r=e*l-l;this.ctx.fillText(this.currentText,n,r)}this.ctx.restore()}apply(e,t){if(!t.text||!t.text.trim())throw Error(`Watermark text cannot be empty`);this.currentOptions={...this.defaultOptions,...t},this.currentText=t.text,this.initCanvas(e),this.drawWatermark()}update(e){if(!this.container)throw Error(`Watermark not initialized. Call apply() first.`);e.text!==void 0&&(this.currentText=e.text),this.currentOptions={...this.currentOptions,...e},this.drawWatermark()}clear(){this.canvas&&this.ctx&&this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.currentText=``}destroy(){this.canvas&&this.canvas.parentNode&&this.canvas.parentNode.removeChild(this.canvas),this.canvas=null,this.ctx=null,this.container=null,this.currentText=``}getCurrentText(){return this.currentText}getCurrentOptions(){return{...this.currentOptions}}enableAutoResize(){let e=()=>{this.currentText&&this.container&&this.drawWatermark()};return window.addEventListener(`resize`,e),()=>{window.removeEventListener(`resize`,e)}}};function u(e,t){let n=new l,r=(0,c.ref)(!1),i=(0,c.ref)(``),a=null,o=o=>{if(!e.value){console.warn(`Container element not found`);return}let s=o||t;if(!s)throw Error(`Watermark options are required`);n.apply(e.value,s),i.value=s.text,r.value=!0,a||=n.enableAutoResize()},s=e=>{n.update(e),e.text!==void 0&&(i.value=e.text)},u=()=>{n.clear(),r.value=!1,i.value=``},d=()=>{n.destroy(),a&&=(a(),null),r.value=!1,i.value=``};return(0,c.onMounted)(()=>{t&&e.value&&o(t)}),(0,c.onUnmounted)(()=>{d()}),{isApplied:r,currentText:i,apply:o,update:s,clear:u,destroy:d}}const d=new WeakMap,f={mounted(e,t){let n=typeof t.value==`string`?{text:t.value}:t.value;if(!n||!n.text){console.warn(`[v-watermark] Watermark text is required`);return}try{let t=new l;t.apply(e,n);let r=t.enableAutoResize();d.set(e,t),e._watermarkCleanup=r}catch(e){console.error(`[v-watermark] Failed to apply watermark:`,e)}},updated(e,t){let n=d.get(e);if(!n){console.warn(`[v-watermark] Watermark instance not found`);return}let r=typeof t.value==`string`?{text:t.value}:t.value;if(!r||!r.text){console.warn(`[v-watermark] Watermark text is required`);return}try{n.update(r)}catch(e){console.error(`[v-watermark] Failed to update watermark:`,e)}},unmounted(e){let t=d.get(e);t&&(t.destroy(),d.delete(e));let n=e._watermarkCleanup;n&&(n(),delete e._watermarkCleanup)}},p={install(e){e.directive(`watermark`,f)}};exports.WatermarkCreator=l,exports.WatermarkPlugin=p,exports.useWatermark=u,exports.vWatermark=f;
//# sourceMappingURL=index.cjs.map