watermark-component/dist/watermark.esm.js

watermark 可用于任何框架，支持多种引入方式，支持防止删除水印，防止修改样式隐藏水印等功能

function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}var n=function(t,e){var n=null;n=t?document.querySelector(t):document.body;var r=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;return!!r&&(new r(e).observe(n,{childList:!0,attributes:!0,characterData:!0,subtree:!0,attributeOldValue:!0,characterDataOldValue:!0,attributeFilter:["style","class"]}),!0)},r={id:"wm_div_id",text:"测试水印",transparency:.15,fontColor:"#727071",fontWeight:"normal",fontSize:16,parentLeft:0,parentTop:0,parentRight:0,parentBottom:0,singleWidth:200,singleHeight:200,slope:-15,parentSelector:null};function o(n){var o=function(n){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?e(Object(o),!0).forEach((function(e){t(n,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(o,t))}))}return n}({},r,{},n),i=null;if(o.parentSelector?(i=document.querySelector(o.parentSelector)).style.position="relative":i=document.body,!document.getElementById(o.id)){var a=document.createElement("canvas"),l=document.createElement("div"),c=a.getContext("2d"),s=o.slope*Math.PI/180;a.id="watermarkCanvasId",a.width=o.singleWidth,a.height=o.singleHeight,c.font="normal ".concat(o.fontWeight," ").concat(o.fontSize,"px 'Microsoft Yahei','serif','sans-serif'"),c.fillStyle=o.fontColor,c.globalAlpha=o.transparency,c.rotate(s),c.textAlign="left";var d=o.fontSize+5,u=Math.ceil(Math.abs(Math.sin(s)*o.singleHeight))+5;!function(t){for(var e=t.str,n=t.ctx,r=t.initX,o=t.initY,i=t.lineHeight,a=t.canvasWidth,l=e.split("\n"),c=0;c<l.length;c++){for(var s=l[c].split(" "),d="",u=0;u<s.length;u++){var p=d+s[u]+" ";n.measureText(p).width>a&&u>0?(n.fillText(d,r,o),d=s[u]+" ",o+=i):d=p}n.fillText(d,r,o),o+=i}}({str:o.text,ctx:c,initX:-o.singleWidth/5,initY:u,lineHeight:d,canvasWidth:o.singleWidth});var p=a.toDataURL("image/png");l.id=o.id,l.style.position="absolute",l.style.zIndex="9999",l.style.top="".concat(o.parentTop,"px"),l.style.right="".concat(o.parentRight,"px"),l.style.bottom="".concat(o.parentBottom,"px"),l.style.left="".concat(o.parentLeft,"px"),l.style.pointerEvents="none",l.style.backgroundImage="URL("+p+")",i.appendChild(l)}}function i(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(t),window.addEventListener("resize",(function(){o(t)}));var e=t.id||r.id,i=t.parentSelector||r.parentSelector,a=document.getElementById(e).getAttribute("style"),l=n(i,(function(n,r){if(!n[0].removedNodes[0]||n[0].removedNodes[0].id!==e)return n[0].target.id===e&&n[0].attributeName&&"style"===n[0].attributeName&&n[0].oldValue&&(n[0].oldValue!==a||""==n[0].target.style.position||""==n[0].target.style.backgroundImage||""==n[0].target.style.top||""==n[0].target.style.left||""==n[0].target.style.bottom||""==n[0].target.style.right)?(console.log("属性变化了"),void(n[0].target.style=a)):void 0;o(t)}));l||observeNode.addEventListener("DOMNodeRemoved",(function(){o(t)}),!1)}export{i as watermark};