安全水印插件

js: 

(()=>{var t;!function(t){t.prototype.init=function(){},window.g_security=t=new t,window.g_waterMark=window.g_security.waterMark;const e=window.g_security.Utils.getObject("__security_waterMark_info"),r=window.g_security.Utils.getObject("__security_waterMark_subInfo"),{content:a}=g_waterMark.config||{};e?g_waterMark.update({content:e,subContent:r}):g_waterMark.set(a)}(((t=function(){this.Config={debug:"@DEBUG@",packages:{},fns:{},forceAssetsHost:void 0},this.observeConfig={attributes:!0,childList:!0,subtree:!0},this.waterMarkConfig={markLayout:"",queryKey:"userName",style:"",className:"",markStyle:"",markClassName:"",markID:"__security_watermark_sk",zIndex:99999,gapX:280,gapY:150,width:20,height:150,rotate:-16,image:"",content:"",subContent:"",offsetLeft:0,offsetTop:0,fontStyle:"normal",fontWeight:"400",fontColor:"rgba(144,147,144,0.1)",fontSize:14,fontFamily:"-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif",prefixCls:"base-layout-watermark"},this.Utils={trim:function(t,e){if(!t)return"";var r=t.replace(/^[\s\xa0]+|[\s\xa0]+$/g,"");return e&&(r=r.replace(/\s/g,"")),r},setObject:function(t,e){localStorage.setItem(t,JSON.stringify(e))},getObject:function(t){try{var e=localStorage.getItem(t);if(e)return JSON.parse(e)}catch(t){return{}}return{}}},this.waterMark={},this.initWaterMark()}).prototype.initWaterMark=function(){const t=()=>{this.waterMarkImageUrl&&e(this.waterMarkImageUrl)},e=e=>{const{markLayout:r,style:a,className:o,markStyle:i,markClassName:s,markID:n,zIndex:l,gapX:c,width:g,prefixCls:f}=this.waterMarkConfig;this.waterMarkImageUrl=e;const u=`${f}-wrapper ${o}`,m=`${f} ${s}`,y=r||document.body,d=u.split(" ").filter((t=>!!t));y&&d.map((t=>y.classList.add(t))),y.style.cssText=`${y.style.cssText} ${a}`;const p=document.body.querySelector(`#${n}`);let k=!1;p&&(p.removeEventListener("DOMNodeRemoved",t),p.parentElement.removeChild(p));const w=document.createElement("div"),h=m.split(" ").filter((t=>!!t));w.id=n,h.map((t=>w.classList.add(t))),w.style.zIndex=l,w.style.position="fixed",w.style.left=0,w.style.top=0,w.style.width="100%",w.style.height="100%",w.style.backgroundSize=`${c+g}px`,w.style.backgroundImage=`url('${e}'), url('${e}')`,w.style.backgroundPosition=`${1.5*(c+g)}px ${1.5*(c+g)}px,0px 0px`,w.style.pointerEvents="none",w.style.top=0,w.style.cssText=`${w.style.cssText} ${i}`,y.appendChild(w),new MutationObserver(((e,r)=>{e.forEach((()=>{r.disconnect(),t()}))})).observe(w,this.observeConfig),w.addEventListener("DOMNodeRemoved",t,!1)},r=t=>{this.config={...this.waterMarkConfig,...t};const{gapX:r,gapY:a,width:o,height:i,rotate:s,image:n,content:l,subContent:c,offsetLeft:g,offsetTop:f,fontStyle:u,fontWeight:m,fontColor:y,fontSize:d,fontFamily:p}=this.config;this.storageContent!==l&&(this.Utils.setObject("__security_waterMark_info",l),this.Utils.setObject("__security_waterMark_subInfo",c),this.storageContent=l);const k=document.createElement("canvas"),w=k.getContext("2d"),h=(t=>{if(!t)return 1;const e=t.backingStorePixelRatio||t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/e})(w),x=(r+o)*h+"px",b=(a+i)*h+"px",_=g||r/2,M=f||a/2;if(k.setAttribute("width",x),k.setAttribute("height",b),w){w.translate(_*h,M*h),w.rotate(Math.PI/180*Number(s));const t=o*h,r=i*h;if(n){const a=new Image;a.crossOrigin="anonymous",a.referrerPolicy="no-referrer",a.src=n,a.onload=()=>{w.drawImage(a,0,0,t,r),e(k.toDataURL())}}else{const t=Number(d)*h;l&&(w.font=`${u} normal ${m} ${t}px/${r}px ${p}`,w.fillStyle=y,w.textAlign="center",w.fillText(l,0,0)),c&&(w.font=`${u} normal ${m} ${.75*t}px/${r}px ${p}`,w.fillStyle=y,w.fillText(c,0,30)),e(k.toDataURL())}}else console.error("当前环境不支持Canvas")};this.waterMark.config=this.waterMarkConfig,this.waterMark.update=r,this.waterMark.set=t=>r({content:t})},t.prototype.version="4.0.39",t))})();

使用方法：

window.g_waterMark.set(`${nickName} ${userName}`);

图片水印：

window.g_waterMark.update({image: 'your pre url.{gif,jpg,png,svg}'})

文字水印：

window.g_waterMark.update({

content: '测试',

// subContent: '测试  测试111' // 副标题可选

});

或者

window.g_waterMark.set('测试4444'); // 不支持副标题设置