watermark-component/dist/watermark.min.js

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

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