@wendyjs/watermarker
Version:
This is a framework-agnostic package that provides a Watermark class for managing watermarks on HTML elements. It includes features such as automatic re-rendering when mutations occur, customizable watermark styles
2 lines (1 loc) • 10.5 kB
JavaScript
;function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}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}function n(t){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?e(Object(o),!0).forEach((function(e){r(t,e,o[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):e(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function r(t,e,n){return(e=a(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function o(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,a(r.key),r)}}function a(e){var n=function(e,n){if("object"!=t(e)||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var o=r.call(e,n||"default");if("object"!=t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==t(n)?n:n+""}function i(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var r,o,a,i,c=[],l=!0,u=!1;try{if(a=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(c.push(r.value),c.length!==e);l=!0);}catch(t){u=!0,o=t}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(u)throw o}}return c}}(t,e)||l(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(t){return function(t){if(Array.isArray(t))return u(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||l(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(t,e){if(t){if("string"==typeof t)return u(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?u(t,e):void 0}}function u(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=Array(e);n<e;n++)r[n]=t[n];return r}var f=function(t,e){var n=!1;return t.removedNodes.length&&(n=Array.from(t.removedNodes).some((function(t){return e(t)}))),"attributes"===t.type&&e(t.target)&&(n=!0),n};var s,b=3;function m(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=document.createElement("canvas"),o=r.getContext("2d"),a=t*n,i=e*n;return r.setAttribute("width","".concat(a,"px")),r.setAttribute("height","".concat(i,"px")),o.save(),[o,r,a,i]}function v(){return function(t,e,n,r,o,a,c,l){var u=i(m(r,o,n),4),f=u[0],s=u[1],b=u[2],v=u[3];if(t instanceof HTMLImageElement)f.drawImage(t,0,0,b,v);else{var h=a.color,d=a.fontSize,y=a.fontStyle,p=a.fontWeight,g=a.fontFamily,w=a.textAlign,x=Number(d)*n;f.font="".concat(y," normal ").concat(p," ").concat(x,"px/").concat(o,"px ").concat(g),f.fillStyle=h,f.textAlign=w,f.textBaseline="top";var S=Array.isArray(t)?t:[t];S&&S.forEach((function(t,e){f.fillText(t||"",b/2,e*(x+3*n))})),f.fillStyle="rgba(0,0,0,0)",f.fillRect(0,0,s.width,s.height)}var O=Math.PI/180*Number(e),j=Math.max(r,o),k=i(m(j,j,n),3),M=k[0],A=k[1],P=k[2];M.translate(P/2,P/2),M.rotate(O),b>0&&v>0&&M.drawImage(s,-b/2,-v/2);var I=0,E=0,F=0,T=0,W=b/2,z=v/2;[[0-W,0-z],[0+W,0-z],[0+W,0+z],[0-W,0+z]].forEach((function(t){var e=i(t,2),n=function(t,e){return[t*Math.cos(O)-e*Math.sin(O),t*Math.sin(O)+e*Math.cos(O)]}(e[0],e[1]),r=i(n,2),o=r[0],a=r[1];I=Math.min(I,o),E=Math.max(E,o),F=Math.min(F,a),T=Math.max(T,a)}));var C=I+P/2,N=F+P/2,D=E-I,L=T-F,B=c*n,R=l*n,U=2*(D+B),$=L+R,H=i(m(U,$),2),Z=H[0],q=H[1];function G(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;Z.drawImage(A,C,N,D,L,t,e,D,L)}return G(),G(D+B,-L/2-R/2),G(D+B,+L/2+R/2),[q.toDataURL(),U/n,$/n]}}!function(t){t.Color="rgba(0,0,0,0.1)",t[t.FontSize=14]="FontSize",t.FontWeight="normal",t.FontStyle="normal",t.FontFamily="sans-serif",t.TextAlign="center"}(s||(s={}));var h=function(){function t(e,r){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),Object.defineProperty(this,"watermarkMap",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"configs",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"getClips",{enumerable:!0,configurable:!0,writable:!0,value:v()}),Object.defineProperty(this,"watermarkInfo",{enumerable:!0,configurable:!0,writable:!0,value:["",0]}),Object.defineProperty(this,"observer",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"container",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"debounced",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),this.configs=n({zIndex:99999,rotate:-22,font:{},gap:[100,100],inherit:!0},e),this.container=r||document.body,this.watermarkMap=new Map,this.debounced=function(t,e){var n=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).signal,r=null,o=function(){for(var o=arguments.length,a=new Array(o),i=0;i<o;i++)a[i]=arguments[i];null!==r&&clearTimeout(r),(null==n?void 0:n.aborted)||(r=setTimeout((function(){t.apply(void 0,a),r=null}),e))};return o.cancel=function(){null!==r&&(clearTimeout(r),r=null)},null==n||n.addEventListener("abort",(function(){o.cancel()}),{once:!0}),o}(this.renderWatermark.bind(this),500),this.observer=new MutationObserver(this.onMutate.bind(this))}return e=t,r=[{key:"onMutate",value:function(t){var e,n=this,r=function(t){return Array.from(n.watermarkMap.values()).includes(t)},o=function(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=l(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var r=0,o=function(){};return{s:o,n:function(){return r>=t.length?{done:!0}:{done:!1,value:t[r++]}},e:function(t){throw t},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var a,i=!0,c=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return i=t.done,t},e:function(t){c=!0,a=t},f:function(){try{i||null==n.return||n.return()}finally{if(c)throw a}}}}(t);try{for(o.s();!(e=o.n()).done;){var a=e.value;f(a,r)?this.debounced(this.container,!0):a.target===this.container&&a.attributeName}}catch(t){o.e(t)}finally{o.f()}}},{key:"renderWatermark",value:function(t){var e=this;t&&(this.container=t),this.removeWatermark(this.container);var n=this.configs,r=n.rotate,o=void 0===r?-22:r,a=n.image,l=n.content,u=n.font,f=void 0===u?{}:u,m=n.gap,v=void 0===m?[100,100]:m,h=f.color,d=void 0===h?s.Color:h,y=f.fontSize,p=void 0===y?s.FontSize:y,g=f.fontWeight,w=void 0===g?s.FontWeight:g,x=f.fontStyle,S=void 0===x?s.FontStyle:x,O=f.fontFamily,j=void 0===O?s.FontFamily:O,k=f.textAlign,M=void 0===k?s.TextAlign:k,A=i(v,2),P=A[0],I=A[1],E=document.createElement("canvas").getContext("2d");if(E&&this.container){var F=window.devicePixelRatio||1,T=function(t,e){var n=120,r=64,o=e.image,a=e.font,i=void 0===a?{}:a,l=e.width,u=e.height,f=e.content,s=i.fontSize,m=void 0===s?14:s,v=i.fontFamily,h=void 0===v?"sans-serif":v;if(!o&&t.measureText){t.font="".concat(Number(m),"px ").concat(h);var d=Array.isArray(f)?f:[f],y=d.map((function(e){var n=t.measureText(e);return[n.width,n.fontBoundingBoxAscent+n.fontBoundingBoxDescent]}));n=Math.ceil(Math.max.apply(Math,c(y.map((function(t){return t[0]}))))),r=Math.ceil(Math.max.apply(Math,c(y.map((function(t){return t[1]})))))*d.length+(d.length-1)*b}return[l||n,u||r]}(E,this.configs),W=i(T,2),z=W[0],C=W[1],N=function(t){var n=i(e.getClips(t||"",o,F,z,C,{color:d,fontSize:p,fontStyle:S,fontWeight:w,fontFamily:j,textAlign:M},P,I),2),r=n[0],a=n[1];e.watermarkInfo=[r,a];var c=e.appendWatermark(e.watermarkInfo[0],e.watermarkInfo[1],e.container);e.observer.observe(e.container,{attributes:!0,childList:!0,subtree:!0}),c&&e.observer.observe(c,{attributes:!0,childList:!0,subtree:!0})};if(a){var D=new Image;D.onload=function(){N(D)},D.onerror=function(){N(l)},D.crossOrigin="anonymous",D.referrerPolicy="no-referrer",D.src=a}else N(l)}}},{key:"appendWatermark",value:function(t,e,r){var o,a,c,l,u,f,s,b,m,v,h;if(r){if(!this.watermarkMap.get(r)){var d=document.createElement("div");this.watermarkMap.set(r,d)}o=this.watermarkMap.get(r);var y=(c=this.configs,l={zIndex:99999,position:"absolute",left:0,top:0,width:"100%",height:"100%",pointerEvents:"none",backgroundRepeat:"repeat"},u=c.offset,f=c.gap,s=i(void 0===f?[100,100]:f,2),b=s[0]/2,m=s[1]/2,v=((u?u[0]:0)||b)-b,h=((u?u[1]:0)||m)-m,v>0&&(l.left="".concat(v,"px"),l.width="calc(100% - ".concat(v,"px)"),v=0),h>0&&(l.top="".concat(h,"px"),l.height="calc(100% - ".concat(h,"px)"),h=0),l.backgroundPosition="".concat(v,"px ").concat(h,"px"),l);o.setAttribute("style",(a=n(n({},y),{},{backgroundImage:"url('".concat(t,"')"),backgroundSize:"".concat(Math.floor(e),"px")},{visibility:"visible !important"}),Object.keys(a).map((function(t){return"".concat(function(t){return t.replace(/([A-Z])/g,"-$1").toLowerCase()}(t),": ").concat(a[t],";")})).join(" "))),o.removeAttribute("class"),o.parentElement!==r&&r.append(o)}return o}},{key:"removeWatermark",value:function(t){var e=this.watermarkMap.get(t);e&&e.parentNode&&e.parentNode.removeChild(e),this.watermarkMap.delete(t),this.observer.disconnect()}}],a=[{key:"create",value:function(e,r){return null==this.instance?this.instance=new t(e,r):(e&&(this.instance.configs=n(n({},this.instance.configs),e)),r&&(this.instance.container=r)),this.instance.renderWatermark(),this.instance}}],r&&o(e.prototype,r),a&&o(e,a),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,r,a}();module.exports=h;