UNPKG

watermark-component

Version:

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

2 lines (1 loc) 3.45 kB
"use strict";function t(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function e(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}Object.defineProperty(exports,"__esModule",{value:!0});var r=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)},n={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(r){var o=function(r){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?e(Object(o),!0).forEach((function(e){t(r,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach((function(t){Object.defineProperty(r,t,Object.getOwnPropertyDescriptor(o,t))}))}return r}({},n,{},r),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"),s=a.getContext("2d"),c=o.slope*Math.PI/180;a.id="watermarkCanvasId",a.width=o.singleWidth,a.height=o.singleHeight,s.font="normal ".concat(o.fontWeight," ").concat(o.fontSize,"px 'Microsoft Yahei','serif','sans-serif'"),s.fillStyle=o.fontColor,s.globalAlpha=o.transparency,s.rotate(c),s.textAlign="left";var d=o.fontSize+5,u=Math.ceil(Math.abs(Math.sin(c)*o.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"),s=0;s<l.length;s++){for(var c=l[s].split(" "),d="",u=0;u<c.length;u++){var p=d+c[u]+" ";r.measureText(p).width>a&&u>0?(r.fillText(d,n,o),d=c[u]+" ",o+=i):d=p}r.fillText(d,n,o),o+=i}}({str:o.text,ctx:s,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)}}exports.watermark=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};o(t),window.addEventListener("resize",(function(){o(t)}));var e=t.id||n.id,i=t.parentSelector||n.parentSelector,a=document.getElementById(e).getAttribute("style"),l=r(i,(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;o(t)}));l||observeNode.addEventListener("DOMNodeRemoved",(function(){o(t)}),!1)};