@jkun/watermark/dist/ivy-watermark/p-bd237e3b.entry.js

Stencil Component Starter

import{r as t,h as s,H as i,w as h}from"./p-d7e5c41a.js";function a(){return window.devicePixelRatio||1}function e(t,s,i,h){t.translate(s,i),t.rotate(Math.PI/180*Number(h)),t.translate(-s,-i)}const r=class{constructor(s){t(this,s),this.BaseSize=2,this.FontGap=3,this.getMarkSize=t=>{let s=120,i=64;if(!this.image&&t.measureText){t.font=`${parseFloat(this.fontSize)}px ${this.fontFamily}`;const h=[this.content],a=h.map((s=>t.measureText(s).width));s=Math.ceil(Math.max(...a)),i=parseFloat(this.fontSize)*h.length+(h.length-1)*this.FontGap}return[this.width?parseFloat(this.width):s,this.height?parseFloat(this.height):i]},this.fillTexts=(t,s,i,h,e)=>{const r=a(),n=parseFloat(this.fontSize)*r;t.font=`${this.fontStyle} normal ${this.fontWeight} ${n}px/${e}px ${this.fontFamily}`,t.fillStyle=this.fontColor,t.textAlign="center",t.textBaseline="top",t.translate(h/2,0);const o=[this.content];null==o||o.forEach(((h,a)=>{t.fillText(null!=h?h:"",s,i+a*(n+this.FontGap*r))}))},this.appendWatermark=(t,s)=>{this.watermarkRef&&(this.waterSrc=t,this.backgroundSize=(parseFloat(this.gapX)+s)*this.BaseSize+"px")},this.renderWatermark=()=>{const t=document.createElement("canvas"),s=t.getContext("2d");if(s){const i=a(),[h,r]=this.getMarkSize(s),n=(parseFloat(this.gapX)+h)*i,o=(parseFloat(this.gapY)+r)*i;t.setAttribute("width",n*this.BaseSize+"px"),t.setAttribute("height",o*this.BaseSize+"px");const l=parseFloat(this.gapX)*i/2,p=parseFloat(this.gapY)*i/2,c=h*i,d=r*i,u=(c+parseFloat(this.gapX)*i)/2,m=(d+parseFloat(this.gapY)*i)/2,F=l+n,g=p+o,x=u+n,w=m+o;if(s.save(),e(s,u,m,parseFloat(this.rotate)),this.image){const i=new Image;i.onload=()=>{s.drawImage(i,l,p,c,d),s.restore(),e(s,x,w,parseFloat(this.rotate)),s.drawImage(i,F,g,c,d),this.appendWatermark(t.toDataURL("image/png"),h)},i.crossOrigin="anonymous",i.referrerPolicy="no-referrer",i.src=this.image}else this.fillTexts(s,l,p,c,d),s.restore(),e(s,x,w,parseFloat(this.rotate)),this.fillTexts(s,F,g,c,d),this.appendWatermark(t.toDataURL("image/png"),h)}},this.image=null,this.waterSrc="",this.backgroundSize=null,this.width=void 0,this.height=void 0,this.content="",this.rotate="-22",this.zIndex="1000",this.fontSize="16px",this.fontWeight="normal",this.fontStyle="normal",this.fontColor="rgba(0,0,0,0.15)",this.fontFamily="PingFang SC, sans-serif",this.gapX="100",this.gapY="100",this.offsetY="0",this.offsetX="0",this.watermarkIndex="1000"}watchZIndexHandler(t){this.watermarkIndex=parseInt(t).toFixed(0)}render(){return s(i,null,s("div",{class:"watermark",ref:t=>this.watermarkRef=t,tabindex:"-1",style:{zIndex:this.watermarkIndex,backgroundImage:`url(${this.waterSrc})`,backgroundSize:this.backgroundSize}}),s("slot",null))}componentDidLoad(){h((()=>{this.renderWatermark()}))}static get watchers(){return{zIndex:["watchZIndexHandler"]}}};r.style=":host{display:block;position:relative}.watermark{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-repeat:repeat}";export{r as ivy_watermark}