xys-watermark/dist/index.umd.js

xys-watermark：一个支持TS的前端水印SDK，可以自由的在前端页面中添加各种形式和内容的水印（或暗水印）！

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).WaterMark=t()}(this,(function(){"use strict";function e(e,t,n,r){return new(n||(n=Promise))((function(o,i){function a(e){try{s(r.next(e))}catch(e){i(e)}}function c(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?o(e.value):(t=e.value,t instanceof n?t:new n((function(e){e(t)}))).then(a,c)}s((r=r.apply(e,t||[])).next())}))}function t(e,t){var n,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function c(i){return function(c){return function(i){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,r&&(o=2&i[0]?r.return:i[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],r=0}finally{n=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}var n=document.createElement("canvas"),r=n.getContext("2d"),o=function(o){return e(void 0,void 0,void 0,(function(){var e,a,c,s;return t(this,(function(t){switch(t.label){case 0:return(e=document.createElement("img")).src=o,e.crossOrigin="true",[4,new Promise((function(t){e.onload=t}))];case 1:return t.sent(),a=e.width,c=e.height,n.width=a,n.height=c,r.drawImage(e,0,0,a,c),s=r.getImageData(0,0,a,c),i(s.data),r.putImageData(s,0,0),e.remove(),[2,n.toDataURL("image/png")]}}))}))},i=function(e){for(var t=new Map,n=new Map,r=0;r<e.length;r+=4){var o="".concat(e[r],",").concat(e[r+1],",").concat(e[r+2]);t.set(o,(t.get(o)||0)+1)}Array.from(t).forEach((function(e){for(var r=e[0],o=e[1],i=0,c=a(r);i<c.length;i++){var s=c[i],u=t.get(s);if(u&&u>o){n.set(r,o);break}}}));for(r=0;r<e.length;r+=4){var i=[e[r],e[r+1],e[r+2]].join(","),c=n.get(i);e[r]=c?0:255,e[r+1]=c?0:255,e[r+2]=c?0:255}},a=function(e){var t=e.split(",").map(Number),n=t[0],r=t[1],o=t[2],i=[];return i.push([n-1,r-1,o-1]),i.push([n+1,r+1,o+1]),i.push([n-2,r-1,o-1]),i.push([n-1,r-2,o-1]),i.push([n-1,r-1,o-2]),i.push([n-2,r-2,o-1]),i.push([n-1,r-2,o-2]),i.push([n-2,r-2,o-2]),i.map((function(e){return e.join(",")}))},c=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/,s=function(n){return e(void 0,void 0,void 0,(function(){var r,o,i,a;return t(this,(function(s){switch(s.label){case 0:return r="","string"!=typeof n.target?[3,3]:c.test(n.target)?[4,(u=n.target,e(void 0,void 0,void 0,(function(){var e,n;return t(this,(function(t){switch(t.label){case 0:return(e=new Image(l,d)).setAttribute("crossorigin","crossorigin"),e.src=u,[4,new Promise((function(t){e.onload=function(){t(e)},e.onerror=function(){t(null)}}))];case 1:if(!(n=t.sent()))throw new Error("An error occurred while loading image (src: ".concat(u," )"));return[2,n]}}))})))]:[3,2];case 1:if(!(o=s.sent()))throw new Error("An error occurred while loading image (src: ".concat(n.target," )"));return n.target=o,[3,3];case 2:if(i=document.querySelector(n.target),r=n.target,!i)throw new Error("can not get the target (".concat(n.target," )"));n.target=i,s.label=3;case 3:return[2,{target:n.target,selectors:r,text:n.text||"Sample Text",image:n.image||"",imageWidth:n.imageWidth&&Number(n.imageWidth)||0,imageHeight:n.imageHeight&&Number(n.imageHeight)||0,color:n.color||"rgba(0, 0, 0, 0.07)",fontSize:Number(n.fontSize)||24,zIndex:(null===(a=n.zIndex)||void 0===a?void 0:a.toString())||"2147483647",cSpace:Number(n.cSpace)||0,vSpace:Number(n.vSpace)||0,angle:Number(n.angle)||0,secret:n.secret||!1,position:n.position||"repeat",onchange:n.onchange||function(){},onerror:n.onerror||function(){},success:n.success||function(){}}]}var u,l,d}))}))},u=function(e){var t=document.createElement("div");t.id="watermark-9527";var n=e.target,r=e.image,o=e.imageWidth,i=e.imageHeight,a=e.zIndex,c={"background-image":"url(".concat(r,"), url(").concat(r,")"),position:n===document.body?"fixed":"absolute",top:"50%",left:"50%","pointer-events":"none","background-repeat":"repeat","background-size":"".concat(o,"px ").concat(i,"px"),"background-position":"0 0, ".concat(o/2,"px ").concat(i/2,"px"),"z-index":a,display:"block",visibility:"visible",width:"300%",height:"300%",opacity:"1",transform:"rotate(".concat(e.angle||0,"deg) translate(-50%,-50%)"),"transform-origin":"0 0",scale:"none","user-select":"none"},s=Object.keys(c).reduce((function(e,t){return e+="".concat(t,": ").concat(c[t]," !important; ")}),"");return t.setAttribute("style",s),t},l=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,d=function(e,t){var n=t.onchange,r=t.success,o=new h(e,n,t);return r(),o},h=function(){function e(e,t,n){var r=this;this.onchange=t,this.config=n,this._callback=function(e){for(var t=!1,n=r.getWatermark(r.config),o=r.getTarget(r.config),i=0,a=e;i<a.length;i++){var c=a[i];if("childList"===c.type)for(var s=0;s<c.removedNodes.length;s++){var u=c.removedNodes[s];if(u===n||"watermark-9527"===u.id||u.contains(o)||u.contains(n)){t=!0;break}}else c.target!==r.element&&c.target!==n||(t=!0);if(t){r.onchange(c),r._reAddWatermark();break}}};var o=this.getTarget(this.config);o.style.position="relative",this.element=e,this.element&&o.appendChild(this.element),this.parentElement=this.element.parentElement,this.elementHTML=this.element.outerHTML}return e.prototype.start=function(){var e=this;l?(this.observer=new l(this._callback),this.observer.observe(document.documentElement,{characterData:!0,attributes:!0,childList:!0,subtree:!0})):this.setIntervalId=window.setInterval((function(){var t=e.getWatermark(e.config),n=e.getTarget(e.config).contains(t);if(!t||!n){var r=e.createWmByClone();e.addWatermark(r),e.onchange()}}),200)},e.prototype.stop=function(){var e;this.observer?this.observer.disconnect():this.setIntervalId&&window.clearInterval(this.setIntervalId),null===(e=this.element)||void 0===e||e.remove()},e.prototype._reAddWatermark=function(){this.observer&&this.observer.disconnect(),this.element.remove();var e=this.createWmByClone();this.addWatermark(e),this.start()},e.prototype.createWmByClone=function(){var e=document.createElement("div");return e.innerHTML=this.elementHTML,e.firstChild},e.prototype.addWatermark=function(e){var t=this.getWatermark(this.config),n=this.getTarget(this.config);t&&document.documentElement.contains(t)?n.contains(t)?n.replaceChild(e,t):n.appendChild(e):this.getTarget(this.config).appendChild(e),this.element=e,this.parentElement=this.element.parentElement},e.prototype.getWatermark=function(e){return document.getElementById("watermark-9527")},e.prototype.getTarget=function(e){if(e.selectors){var t=document.querySelector(e.selectors);return t||document.body}return e.target},e.prototype.isEqualNode=function(e,t){return!(!(null==e?void 0:e.outerHTML)||!(null==t?void 0:t.outerHTML))&&e.outerHTML===t.outerHTML},e}(),f=function(e){var t=document.createElement("canvas"),n=function(e,t){var n,r={width:0,height:0},o=document.createElement("span");return r.width=o.offsetWidth,r.height=o.offsetWidth,o.style.visibility="hidden",o.style.fontSize=t+"px",document.body.appendChild(o),o.textContent?o.textContent=e:o.innerText=e,r.width=o.offsetWidth-r.width,r.height=o.offsetHeight-r.height,null===(n=o.parentNode)||void 0===n||n.removeChild(o),r}(e.text,e.fontSize),r=n.width,o=n.height,i=t.getContext("2d");Math.abs(e.angle);var a=window.devicePixelRatio||1;if(t.width=(r+e.cSpace)*a,t.height=(o+e.vSpace)*a,!i)throw new Error("Not exist: document.createElement('canvas').getContext('2d')");return i.font="".concat(e.fontSize,"px Microsoft YaHei"),i.fillStyle=e.color,i.textAlign="center",i.textBaseline="middle",i.translate(t.width/2,t.height/2),i.scale(a,a),i.fillStyle=e.color,i.fillText(e.text,0,0),t},g=function(e,t){var n="image"===t?function(e){var t=u(e);return d(t,e)}(e):function(e){var t=f(e);e.imageWidth=t.width/(window.devicePixelRatio||1)||0,e.imageHeight=t.height/(window.devicePixelRatio||1)||0,e.image=t.toDataURL();var n=u(e);return d(n,e)}(e);return null==n||n.start(),{remove:function(){null==n||n.stop()}}};return function(){function n(){}var r;return r=n,n.init=function(n){return e(void 0,void 0,void 0,(function(){var e,o;return t(r,(function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,s(n)];case 1:return e=t.sent(),[2,g(e,e.image?"image":"text")];case 2:return o=t.sent(),n.onerror&&n.onerror("".concat(o)),[3,3];case 3:return[2]}}))}))},n.utils={decodeWatermark:o},n}()}));