watermark-js-plus 0.7.0 → 0.8.0

package/dist/watermark.umd.min.js

@@ -1 +1 @@
-!function(t,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports):"function"==typeof define&&define.amd?define(["exports"],o):o((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,o){t.__proto__=o}||function(t,o){for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(t[e]=o[e])},o(t,e)};function e(t,o,e,i){return new(e||(e=Promise))((function(n,a){function s(t){try{l(i.next(t))}catch(t){a(t)}}function r(t){try{l(i.throw(t))}catch(t){a(t)}}function l(t){var o;t.done?n(t.value):(o=t.value,o instanceof e?o:new e((function(t){t(o)}))).then(s,r)}l((i=i.apply(t,o||[])).next())}))}function i(t,o){var e,i,n,a,s={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return a={next:r(0),throw:r(1),return:r(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function r(a){return function(r){return function(a){if(e)throw new TypeError("Generator is already executing.");for(;s;)try{if(e=1,i&&(n=2&a[0]?i.return:a[0]?i.throw||((n=i.return)&&n.call(i),0):i.next)&&!(n=n.call(i,a[1])).done)return n;switch(i=0,n&&(a=[2&a[0],n.value]),a[0]){case 0:case 1:n=a;break;case 4:return s.label++,{value:a[1],done:!1};case 5:s.label++,i=a[1],a=[0];continue;case 7:a=s.ops.pop(),s.trys.pop();continue;default:if(!(n=s.trys,(n=n.length>0&&n[n.length-1])||6!==a[0]&&2!==a[0])){s=0;continue}if(3===a[0]&&(!n||a[1]>n[0]&&a[1]<n[3])){s.label=a[1];break}if(6===a[0]&&s.label<n[1]){s.label=n[1],n=a;break}if(n&&s.label<n[2]){s.label=n[2],s.ops.push(a);break}n[2]&&s.ops.pop(),s.trys.pop();continue}a=o.call(t,s)}catch(t){a=[6,t],i=0}finally{e=n=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,r])}}}var n=function(t){return t.toDataURL("image/png",1)},a=function(t){return"function"==typeof t},s=function(t){return void 0===t},r=function(t,o,e){void 0===o&&(o={}),void 0===e&&(e="http://www.w3.org/2000/svg");var i=document.createElementNS(e,t);for(var n in o)i.setAttribute(n,o[n]);return i},l=function(){function t(t){void 0===t&&(t={}),this.parentElement=document.body,this.props=t,this.options=Object.assign({width:300,height:300,rotate:45,translatePlacement:"middle",contentType:"text",content:"hello watermark-js-plus",textType:"fill",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:"20px",fontFamily:"sans-serif",fontStyle:"",fontVariant:"",fontColor:"#000",fontWeight:"normal",filter:"none",globalAlpha:.5,mode:"default",mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),this.changeParentElement(this.options.parent),this.initializeOptions()}return t.createCanvas=function(t,o){var e,i=window.devicePixelRatio||1,n=document.createElement("canvas");return n.width=t*i,n.height=o*i,n.style.width="".concat(t,"px"),n.style.height="".concat(o,"px"),null===(e=n.getContext("2d"))||void 0===e||e.setTransform(i,0,0,i,0,0),n},t.prototype.changeOptions=function(t){var o=this;void 0===t&&(t={}),Object.keys(t).forEach((function(e){var i;(null===(i=o.options)||void 0===i?void 0:i[e])&&(o.options[e]=t[e])}))},t.prototype.changeParentElement=function(t){if("string"==typeof t){var o=document.querySelector(t);o&&(this.parentElement=o)}else this.parentElement=t},t.prototype.create=function(){var t,o;return e(this,void 0,void 0,(function(){var e,a,s,r;return i(this,(function(i){switch(i.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return e=i.sent(),a=n(e),this.watermarkDom=document.createElement("div"),s=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,r=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===r?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n    "),s.style.cssText="\n      position: ".concat("root"===r?"fixed;":"absolute;","\n      z-index: ").concat(this.options.zIndex,";\n      pointer-events: none;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background-image: url(").concat(a,");\n      background-repeat: ").concat(this.options.backgroundRepeat,";\n      background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n      background-position: ").concat(this.options.backgroundPosition,";\n      -webkit-print-color-adjust: exact;\n    "),this.watermarkDom.append(s),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(o=(t=this.options).onSuccess)||void 0===o||o.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,o,e,i,n,a,s;null===(o=(t=this.options).onBeforeDestroy)||void 0===o||o.call(t),null===(e=this.observer)||void 0===e||e.disconnect(),null===(i=this.parentObserve)||void 0===i||i.disconnect(),null===(n=this.watermarkDom)||void 0===n||n.remove(),null===(s=(a=this.options).onDestroyed)||void 0===s||s.call(a)},t.prototype.initializeOptions=function(){var t,o,e,i,n,a,r;(null===(t=this.options)||void 0===t?void 0:t.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180));var l="middle",d="center";switch(this.options.translatePlacement){case"top":a=this.options.width/2,r=0,l="top";break;case"top-start":a=0,r=0,l="top",d="start";break;case"top-end":a=this.options.width,r=0,l="top",d="end";break;case"bottom":a=this.options.width/2,r=this.options.height,l="bottom";break;case"bottom-start":a=0,r=this.options.height,l="bottom",d="start";break;case"bottom-end":a=this.options.width,r=this.options.height,l="bottom",d="end";break;case"left":a=0,r=this.options.height/2,d="start";break;case"right":a=this.options.width,r=this.options.height/2,d="end";break;case"middle":a=this.options.width/2,r=this.options.height/2}s(null===(o=this.props)||void 0===o?void 0:o.translateX)||s(null===(e=this.props)||void 0===e?void 0:e.translateY)?(this.options.translateX=a,this.options.translateY=r):(l="top",d="left",this.defaultAdvancedStyleParams.x0=0,this.defaultAdvancedStyleParams.x1=this.options.textRowMaxWidth||this.options.width),s(null===(i=this.props)||void 0===i?void 0:i.textBaseline)&&(this.options.textBaseline=l),s(null===(n=this.props)||void 0===n?void 0:n.textAlign)&&(this.options.textAlign=d)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(o){t&&Object.hasOwnProperty.call(o,"__WATERMARK__")&&(t=!1)})),t},t.prototype.validateContent=function(){switch(this.options.contentType){case"image":return Object.hasOwnProperty.call(this.options,"image");case"multi-line-text":case"rich-text":case"text":return this.options.content.length>0}return!1},t.prototype.draw=function(){var o=this,e=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===e)throw new Error("get context error");return this.setStyle(e),e.translate(this.options.translateX,this.options.translateY),e.rotate(this.options.rotate),new Promise((function(t){switch(o.options.contentType){case"text":o.drawText(e,t);break;case"image":o.drawImage(e,t);break;case"multi-line-text":o.drawMultiLineText(e,t);break;case"rich-text":o.drawRichText(e,t)}}))},t.prototype.setStyle=function(t){var o,e="fillStyle";"stroke"===this.options.textType&&(e="strokeStyle");var i=this.options.fontColor;if(null===(o=this.options)||void 0===o?void 0:o.advancedStyle)switch(this.options.advancedStyle.type){case"linear":i=this.createLinearGradient(t);break;case"radial":i=this.createRadialGradient(t);break;case"conic":i=this.createConicGradient(t);break;case"pattern":i=this.createPattern(t)}t[e]&&i&&(t[e]=i),t.font="".concat(this.options.fontStyle," ").concat(this.options.fontVariant," ").concat(this.options.fontWeight," ").concat(this.options.fontSize," ").concat(this.options.fontFamily),t.filter=this.options.filter,this.options.textAlign&&(t.textAlign=this.options.textAlign),this.options.textBaseline&&(t.textBaseline=this.options.textBaseline),t.globalAlpha=this.options.globalAlpha,this.options.shadowStyle&&(t.shadowBlur=this.options.shadowStyle.shadowBlur||0,t.shadowColor=this.options.shadowStyle.shadowColor||"#00000000",t.shadowOffsetX=this.options.shadowStyle.shadowOffsetX||0,t.shadowOffsetY=this.options.shadowStyle.shadowOffsetY||0),a(this.options.extraDrawFunc)&&this.options.extraDrawFunc(t)},t.prototype.createLinearGradient=function(t){var o,e,i,n,a,s,r,l,d,c,h,p,u,v,f,m=t.createLinearGradient(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.x0,null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.y0,null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.advancedStyle)||void 0===l?void 0:l.params)||void 0===d?void 0:d.x1,null===(p=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.params)||void 0===p?void 0:p.y1);return null===(f=null===(v=null===(u=this.options)||void 0===u?void 0:u.advancedStyle)||void 0===v?void 0:v.colorStops)||void 0===f||f.forEach((function(t){m.addColorStop(t.offset,t.color)})),m},t.prototype.createConicGradient=function(t){var o,e,i,n,a,s,r,l,d,c,h,p,u=t.createConicGradient(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.startAngle,null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.x,null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.advancedStyle)||void 0===l?void 0:l.params)||void 0===d?void 0:d.y);return null===(p=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.colorStops)||void 0===p||p.forEach((function(t){u.addColorStop(t.offset,t.color)})),u},t.prototype.createRadialGradient=function(t){var o,e,i,n,a,s,r,l,d,c,h,p,u,v,f,m,g,y,w,b,x,k=t.createRadialGradient(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.x0,null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.y0,null===(d=null===(l=null===(r=this.options)||void 0===r?void 0:r.advancedStyle)||void 0===l?void 0:l.params)||void 0===d?void 0:d.r0,null===(p=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.params)||void 0===p?void 0:p.x1,null===(f=null===(v=null===(u=this.options)||void 0===u?void 0:u.advancedStyle)||void 0===v?void 0:v.params)||void 0===f?void 0:f.y1,null===(y=null===(g=null===(m=this.options)||void 0===m?void 0:m.advancedStyle)||void 0===g?void 0:g.params)||void 0===y?void 0:y.r1);return null===(x=null===(b=null===(w=this.options)||void 0===w?void 0:w.advancedStyle)||void 0===b?void 0:b.colorStops)||void 0===x||x.forEach((function(t){k.addColorStop(t.offset,t.color)})),k},t.prototype.createPattern=function(t){var o,e,i,n,a,s;return t.createPattern(null===(i=null===(e=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===e?void 0:e.params)||void 0===i?void 0:i.image,(null===(s=null===(a=null===(n=this.options)||void 0===n?void 0:n.advancedStyle)||void 0===a?void 0:a.params)||void 0===s?void 0:s.repetition)||"")},t.prototype.setText=function(t,o){var e="fillText";"stroke"===this.options.textType&&(e="strokeText"),t[e]&&t[e](o.text,o.x,o.y,o.maxWidth)},t.prototype.drawText=function(t,o){this.setText(t,{text:this.options.content,x:0,y:0,maxWidth:this.options.textRowMaxWidth}),o(t.canvas)},t.prototype.drawImage=function(t,o){var e=this,i=new Image;i.setAttribute("crossOrigin","Anonymous"),i.src=this.options.image,i.onload=function(){var n=e.getImageRect(i),a=n.width,s=n.height,r=e.getDrawImagePosition(a,s);t.drawImage(i,r.x,r.y,a,s),o(t.canvas)}},t.prototype.drawMultiLineText=function(t,o){var e,i=this,n=this.options.textRowMaxWidth||this.options.width,a=function(t,o,e){for(var i=[],n="",a=0,s=o.length;a<s;a++)n+=o.charAt(a),t.measureText(n).width>e&&(i.push(n.substring(0,n.length-1)),n="",a--);return i.push(n),i}(t,this.options.content,n);switch(this.options.textBaseline){case"middle":e=(a.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":e=(a.length-1)*this.options.lineHeight;break;case"top":case"hanging":e=0}a.forEach((function(o,n){i.setText(t,{text:o,x:0,y:i.options.lineHeight*n-e})})),o(t.canvas)},t.prototype.drawRichText=function(t,o){var e,i,n=this,a=function(t,o){var e=r("svg",{xmlns:"http://www.w3.org/2000/svg"}),i=document.createElement("div");i.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),i.style.cssText="\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font: ".concat(t.font,";\n  color: ").concat(o.fontColor,";\n"),i.innerHTML='<div class="rich-text-content">'.concat(o.content,"</div>"),document.body.appendChild(i);var n=i.querySelector(".rich-text-content"),a=n.offsetHeight,s=n.offsetWidth;document.body.removeChild(i);var l=o.richTextWidth||s||o.width,d=o.richTextHeight||a||o.height,c=r("foreignObject",{width:l.toString(),height:d.toString()});return c.appendChild(i),e.appendChild(c),{element:e,width:l,height:d}}(t,this.options),s=new Image;s.width=a.width,s.height=a.height,s.src=(e=a.element,i=e.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(i)),s.onload=function(){var e=n.getDrawImagePosition(s.width,s.height);t.drawImage(s,e.x,e.y,t.canvas.width,t.canvas.height),o(t.canvas)}},t.prototype.getImageRect=function(t){var o={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==o.width&&0===o.height:o.height=o.width*t.height/t.width;break;case 0===o.width&&0!==o.height:o.width=o.height*t.width/t.height;break;case 0===o.width&&0===o.height:o.width=t.width,o.height=t.height}return o},t.prototype.getDrawImagePosition=function(t,o){var e,i,n={x:-t/2,y:-o/2};switch(this.options.translatePlacement){case"top":n.x=-t/2,n.y=0;break;case"top-start":n.x=0,n.y=0;break;case"top-end":n.x=-t,n.y=0;break;case"bottom":n.x=-t/2,n.y=-o;break;case"bottom-start":n.x=0,n.y=-o;break;case"bottom-end":n.x=-t,n.y=-o;break;case"left":n.x=0,n.y=-o/2;break;case"right":n.x=-t,n.y=-o/2}return!s(null===(e=this.props)||void 0===e?void 0:e.translateX)&&(n.x=0),!s(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(n.y=0),n},t.prototype.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(o){o.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(o){o.forEach((function(o){var e;(null==o?void 0:o.target)!==t.watermarkDom&&(null===(e=null==o?void 0:o.removedNodes)||void 0===e?void 0:e[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),d=function(t){function e(o){return void 0===o&&(o={}),o.globalAlpha=.005,o.mode="blind",t.call(this,o)||this}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}(e,t),e.decode=function(t){var o=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(o.url&&"canvas"===o.mode){var e=new Image;e.src=o.url,e.onload=function(){var t,i=e.width,s=e.height,r=l.createCanvas(i,s),d=r.getContext("2d");if(null===d)throw new Error("get context error");d.drawImage(e,0,0,i,s),d.globalCompositeOperation=o.compositeOperation,d.fillStyle=o.fillColor,d.fillRect(0,0,i,s);var c=n(r);o.onSuccess&&a(o.onSuccess)&&(null===(t=o.onSuccess)||void 0===t||t.call(o,c))}}},e}(l);t.BlindWatermark=d,t.Watermark=l}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,a){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a])},e(t,a)};function a(t,e,a,n){return new(a||(a=Promise))((function(i,o){function r(t){try{l(n.next(t))}catch(t){o(t)}}function d(t){try{l(n.throw(t))}catch(t){o(t)}}function l(t){var e;t.done?i(t.value):(e=t.value,e instanceof a?e:new a((function(t){t(e)}))).then(r,d)}l((n=n.apply(t,e||[])).next())}))}function n(t,e){var a,n,i,o,r={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return o={next:d(0),throw:d(1),return:d(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function d(d){return function(l){return function(d){if(a)throw new TypeError("Generator is already executing.");for(;o&&(o=0,d[0]&&(r=0)),r;)try{if(a=1,n&&(i=2&d[0]?n.return:d[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,d[1])).done)return i;switch(n=0,i&&(d=[2&d[0],i.value]),d[0]){case 0:case 1:i=d;break;case 4:return r.label++,{value:d[1],done:!1};case 5:r.label++,n=d[1],d=[0];continue;case 7:d=r.ops.pop(),r.trys.pop();continue;default:if(!(i=r.trys,(i=i.length>0&&i[i.length-1])||6!==d[0]&&2!==d[0])){r=0;continue}if(3===d[0]&&(!i||d[1]>i[0]&&d[1]<i[3])){r.label=d[1];break}if(6===d[0]&&r.label<i[1]){r.label=i[1],i=d;break}if(i&&r.label<i[2]){r.label=i[2],r.ops.push(d);break}i[2]&&r.ops.pop(),r.trys.pop();continue}d=e.call(t,r)}catch(t){d=[6,t],n=0}finally{a=i=0}if(5&d[0])throw d[1];return{value:d[0]?d[1]:void 0,done:!0}}([d,l])}}}var i=function(t){return t.toDataURL("image/png",1)},o=function(t){return"function"==typeof t},r=function(t){return void 0===t},d=function(t,e,a){void 0===e&&(e={}),void 0===a&&(a="http://www.w3.org/2000/svg");var n=document.createElementNS(a,t);for(var i in e)n.setAttribute(i,e[i]);return n},l=function(t,e){return r(t)?e:t},s=function(t,e,a){void 0===e&&(e=void 0),void 0===a&&(a=void 0);var n=new Image;return n.setAttribute("crossOrigin","Anonymous"),!r(e)&&(n.width=e),!r(a)&&(n.height=a),n.src=t,new Promise((function(t){n.onload=function(){t(n)}}))},c={width:300,height:300,rotate:45,auxiliaryLine:!1,translatePlacement:"middle",contentType:"text",content:"hello watermark-js-plus",textType:"fill",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:"20px",fontFamily:"sans-serif",fontStyle:"",fontVariant:"",fontColor:"#000",fontWeight:"normal",filter:"none",globalAlpha:.5,mode:"default",mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},h=function(t,e,a){var n=t.getContext("2d");if(null===n)throw new Error("get context error");n.font="".concat(e.fontStyle," ").concat(e.fontVariant," ").concat(e.fontWeight," ").concat(e.fontSize," ").concat(e.fontFamily),n.filter=e.filter,(null==e?void 0:e.rotate)&&(e.rotate=(360-e.rotate%360)*(Math.PI/180)),r(a.textRowMaxWidth)&&(e.textRowMaxWidth=e.width);var i={image:{rect:{width:e.imageWidth,height:e.imageHeight},position:{x:0,y:0}},textLine:{data:[],yOffsetValue:0},advancedStyleParams:{linear:{x0:0,x1:0},radial:{x0:0,y0:0,r0:0,x1:0,y1:0,r1:0},conic:{x:0,y:0,startAngle:0},pattern:{}}};switch(e.contentType){case"text":i.textLine.data=[e.content];break;case"multi-line-text":i.textLine.data=function(t,e,a){for(var n=[],i="",o=0,r=e.length;o<r;o++)i+=e.charAt(o),t.measureText(i).width>a&&(n.push(i.substring(0,i.length-1)),i="",o--);return n.push(i),n}(n,e.content,e.textRowMaxWidth)}var o=e.width/2,d=e.height/2,l="middle",s="center";switch(r(null==a?void 0:a.translateX)||r(null==a?void 0:a.translateY)?(i.advancedStyleParams.linear.x0=-e.width/2,i.advancedStyleParams.linear.x1=e.width/2,i.advancedStyleParams.radial.r0=0,i.advancedStyleParams.radial.r1=e.width/2):(o=null==a?void 0:a.translateX,d=null==a?void 0:a.translateY,l="top",s="left"),a.translatePlacement){case"top":o=e.width/2,d=0,l="top",i.advancedStyleParams.linear.x0=-e.width/2,i.advancedStyleParams.linear.x1=e.width/2,i.advancedStyleParams.radial.y0=i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.radial.y1=i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.conic.y=i.textLine.data.length*e.lineHeight/2;break;case"top-start":o=0,d=0,l="top",s="start",i.advancedStyleParams.linear.x0=0,i.advancedStyleParams.linear.x1=e.width,i.advancedStyleParams.radial.x0=e.width/2,i.advancedStyleParams.radial.y0=i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.radial.x1=e.width/2,i.advancedStyleParams.radial.y1=i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.conic.x=e.width/2,i.advancedStyleParams.conic.y=i.textLine.data.length*e.lineHeight/2;break;case"top-end":o=e.width,d=0,l="top",s="end",i.advancedStyleParams.linear.x0=0,i.advancedStyleParams.linear.x1=-e.width,i.advancedStyleParams.radial.x0=-e.width/2,i.advancedStyleParams.radial.y0=i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.radial.x1=-e.width/2,i.advancedStyleParams.radial.y1=i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.conic.x=-e.width/2,i.advancedStyleParams.conic.y=i.textLine.data.length*e.lineHeight/2;break;case"bottom":o=e.width/2,d=e.height,l="bottom",i.advancedStyleParams.linear.x0=-e.width/2,i.advancedStyleParams.linear.x1=e.width/2,i.advancedStyleParams.radial.y0=-i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.radial.y1=-i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.conic.x=0,i.advancedStyleParams.conic.y=-i.textLine.data.length*e.lineHeight/2;break;case"bottom-start":o=0,d=e.height,l="bottom",s="start",i.advancedStyleParams.linear.x0=0,i.advancedStyleParams.linear.x1=e.width,i.advancedStyleParams.radial.x0=e.width/2,i.advancedStyleParams.radial.y0=-i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.radial.x1=e.width/2,i.advancedStyleParams.radial.y1=-i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.conic.x=e.width/2,i.advancedStyleParams.conic.y=-i.textLine.data.length*e.lineHeight/2;break;case"bottom-end":o=e.width,d=e.height,l="bottom",s="end",i.advancedStyleParams.linear.x0=0,i.advancedStyleParams.linear.x1=-e.width,i.advancedStyleParams.radial.x0=-e.width/2,i.advancedStyleParams.radial.y0=-i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.radial.x1=-e.width/2,i.advancedStyleParams.radial.y1=-i.textLine.data.length*e.lineHeight/2,i.advancedStyleParams.conic.x=-e.width/2,i.advancedStyleParams.conic.y=-i.textLine.data.length*e.lineHeight/2;break;case"left":o=0,d=e.height/2,s="start",i.advancedStyleParams.linear.x0=0,i.advancedStyleParams.linear.x1=e.width,i.advancedStyleParams.radial.x0=e.width/2,i.advancedStyleParams.radial.x1=e.width/2,i.advancedStyleParams.conic.x=e.width/2,i.advancedStyleParams.conic.y=0;break;case"right":o=e.width,d=e.height/2,s="end",i.advancedStyleParams.linear.x0=0,i.advancedStyleParams.linear.x1=-e.width,i.advancedStyleParams.radial.x0=-e.width/2,i.advancedStyleParams.radial.x1=-e.width/2,i.advancedStyleParams.conic.x=-e.width/2,i.advancedStyleParams.conic.y=0}if(e.translateX=o,e.translateY=d,r(null==a?void 0:a.textBaseline)&&(e.textBaseline=l),r(null==a?void 0:a.textAlign)&&(e.textAlign=s),"multi-line-text"===e.contentType)switch(e.textBaseline){case"middle":i.textLine.yOffsetValue=(i.textLine.data.length-1)*e.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":i.textLine.yOffsetValue=(i.textLine.data.length-1)*e.lineHeight;break;case"top":case"hanging":i.textLine.yOffsetValue=0}return i},v=function(){function t(e){void 0===e&&(e={}),this.parentElement=document.body,this.props=e,this.options=Object.assign({},c,e),this.changeParentElement(this.options.parent),this.canvas=t.createCanvas(this.options.width,this.options.height),this.recommendOptions=h(this.canvas,this.options,this.props)}return t.createCanvas=function(t,e){var a,n=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*n,i.height=e*n,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(a=i.getContext("2d"))||void 0===a||a.setTransform(n,0,0,n,0,0),i},t.prototype.changeOptions=function(t,e){void 0===t&&(t={}),void 0===e&&(e="overwrite"),this.initConfigData(t,e)},t.prototype.create=function(){var t,e;return a(this,void 0,void 0,(function(){var a,o,r,d;return n(this,(function(n){switch(n.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return a=n.sent(),o=i(a),this.clearCanvas(),this.watermarkDom=document.createElement("div"),r=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,d=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===d?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n    "),r.style.cssText="\n      position: ".concat("root"===d?"fixed;":"absolute;","\n      z-index: ").concat(this.options.zIndex,";\n      pointer-events: none;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background-image: url(").concat(o,");\n      background-repeat: ").concat(this.options.backgroundRepeat,";\n      background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n      background-position: ").concat(this.options.backgroundPosition,";\n      -webkit-print-color-adjust: exact;\n    "),this.watermarkDom.append(r),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,a,n,i,o,r;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(a=this.observer)||void 0===a||a.disconnect(),null===(n=this.parentObserve)||void 0===n||n.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(r=(o=this.options).onDestroyed)||void 0===r||r.call(o)},t.prototype.initConfigData=function(e,a){var n=this;void 0===a&&(a="overwrite"),this.props=e,"overwrite"===a?this.options=Object.assign({},c,e):Object.keys(e).forEach((function(t){n.options[t]=e[t]})),this.changeParentElement(this.options.parent),this.canvas=t.createCanvas(this.options.width,this.options.height),this.recommendOptions=h(this.canvas,this.options,this.props)},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.prototype.validateContent=function(){switch(this.options.contentType){case"image":return Object.hasOwnProperty.call(this.options,"image");case"multi-line-text":case"rich-text":case"text":return this.options.content.length>0}return!1},t.prototype.draw=function(){var t=this,e=this.canvas.getContext("2d");if(null===e)throw new Error("get context error");return this.setStyle(e),e.save(),e.translate(this.options.translateX,this.options.translateY),e.rotate(this.options.rotate),new Promise((function(a){switch(t.options.contentType){case"text":t.drawText(e,a);break;case"image":t.drawImage(e,a);break;case"multi-line-text":t.drawMultiLineText(e,a);break;case"rich-text":t.drawRichText(e,a)}}))},t.prototype.setStyle=function(t){var e,a="fillStyle";"stroke"===this.options.textType&&(a="strokeStyle");var n=this.options.fontColor;if(null===(e=this.options)||void 0===e?void 0:e.advancedStyle)switch(this.options.advancedStyle.type){case"linear":n=this.createLinearGradient(t);break;case"radial":n=this.createRadialGradient(t);break;case"conic":n=this.createConicGradient(t);break;case"pattern":n=this.createPattern(t)}t[a]&&n&&(t[a]=n),this.options.textAlign&&(t.textAlign=this.options.textAlign),this.options.textBaseline&&(t.textBaseline=this.options.textBaseline),t.globalAlpha=this.options.globalAlpha,this.options.shadowStyle&&(t.shadowBlur=l(this.options.shadowStyle.shadowBlur,0),t.shadowColor=l(this.options.shadowStyle.shadowColor,"#00000000"),t.shadowOffsetX=l(this.options.shadowStyle.shadowOffsetX,0),t.shadowOffsetY=l(this.options.shadowStyle.shadowOffsetY,0)),o(this.options.extraDrawFunc)&&this.options.extraDrawFunc(t)},t.prototype.createLinearGradient=function(t){var e,a,n,i,o,r,d,s,c,h,v,u,p,m,y,f=t.createLinearGradient(l(null===(n=null===(a=null===(e=this.options.advancedStyle)||void 0===e?void 0:e.params)||void 0===a?void 0:a.linear)||void 0===n?void 0:n.x0,this.recommendOptions.advancedStyleParams.linear.x0),l(null===(r=null===(o=null===(i=this.options.advancedStyle)||void 0===i?void 0:i.params)||void 0===o?void 0:o.linear)||void 0===r?void 0:r.y0,0),l(null===(c=null===(s=null===(d=this.options.advancedStyle)||void 0===d?void 0:d.params)||void 0===s?void 0:s.linear)||void 0===c?void 0:c.x1,this.recommendOptions.advancedStyleParams.linear.x1),l(null===(u=null===(v=null===(h=this.options.advancedStyle)||void 0===h?void 0:h.params)||void 0===v?void 0:v.linear)||void 0===u?void 0:u.y1,0));return null===(y=null===(m=null===(p=this.options)||void 0===p?void 0:p.advancedStyle)||void 0===m?void 0:m.colorStops)||void 0===y||y.forEach((function(t){f.addColorStop(t.offset,t.color)})),f},t.prototype.createConicGradient=function(t){var e,a,n,i,o,r,d,s,c,h,v,u,p,m,y,f=t.createConicGradient(l(null===(i=null===(n=null===(a=null===(e=this.options)||void 0===e?void 0:e.advancedStyle)||void 0===a?void 0:a.params)||void 0===n?void 0:n.conic)||void 0===i?void 0:i.startAngle,0),l(null===(s=null===(d=null===(r=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===r?void 0:r.params)||void 0===d?void 0:d.conic)||void 0===s?void 0:s.x,this.recommendOptions.advancedStyleParams.conic.x),l(null===(u=null===(v=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.params)||void 0===v?void 0:v.conic)||void 0===u?void 0:u.y,this.recommendOptions.advancedStyleParams.conic.y));return null===(y=null===(m=null===(p=this.options)||void 0===p?void 0:p.advancedStyle)||void 0===m?void 0:m.colorStops)||void 0===y||y.forEach((function(t){f.addColorStop(t.offset,t.color)})),f},t.prototype.createRadialGradient=function(t){var e,a,n,i,o,r,d,s,c,h,v,u,p,m,y,f,g,x,w,S,b,P,k,O,L,T,C,E=t.createRadialGradient(l(null===(i=null===(n=null===(a=null===(e=this.options)||void 0===e?void 0:e.advancedStyle)||void 0===a?void 0:a.params)||void 0===n?void 0:n.radial)||void 0===i?void 0:i.x0,this.recommendOptions.advancedStyleParams.radial.x0),l(null===(s=null===(d=null===(r=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===r?void 0:r.params)||void 0===d?void 0:d.radial)||void 0===s?void 0:s.y0,this.recommendOptions.advancedStyleParams.radial.y0),l(null===(u=null===(v=null===(h=null===(c=this.options)||void 0===c?void 0:c.advancedStyle)||void 0===h?void 0:h.params)||void 0===v?void 0:v.radial)||void 0===u?void 0:u.r0,this.recommendOptions.advancedStyleParams.radial.r0),l(null===(f=null===(y=null===(m=null===(p=this.options)||void 0===p?void 0:p.advancedStyle)||void 0===m?void 0:m.params)||void 0===y?void 0:y.radial)||void 0===f?void 0:f.x1,this.recommendOptions.advancedStyleParams.radial.x1),l(null===(S=null===(w=null===(x=null===(g=this.options)||void 0===g?void 0:g.advancedStyle)||void 0===x?void 0:x.params)||void 0===w?void 0:w.radial)||void 0===S?void 0:S.y1,this.recommendOptions.advancedStyleParams.radial.y1),l(null===(O=null===(k=null===(P=null===(b=this.options)||void 0===b?void 0:b.advancedStyle)||void 0===P?void 0:P.params)||void 0===k?void 0:k.radial)||void 0===O?void 0:O.r1,this.recommendOptions.advancedStyleParams.radial.r1));return null===(C=null===(T=null===(L=this.options)||void 0===L?void 0:L.advancedStyle)||void 0===T?void 0:T.colorStops)||void 0===C||C.forEach((function(t){E.addColorStop(t.offset,t.color)})),E},t.prototype.createPattern=function(t){var e,a,n,i,o,r,d,l;return t.createPattern(null===(i=null===(n=null===(a=null===(e=this.options)||void 0===e?void 0:e.advancedStyle)||void 0===a?void 0:a.params)||void 0===n?void 0:n.pattern)||void 0===i?void 0:i.image,(null===(l=null===(d=null===(r=null===(o=this.options)||void 0===o?void 0:o.advancedStyle)||void 0===r?void 0:r.params)||void 0===d?void 0:d.pattern)||void 0===l?void 0:l.repetition)||"")},t.prototype.setText=function(t,e){var a="fillText";"stroke"===this.options.textType&&(a="strokeText"),t[a]&&t[a](e.text,e.x,e.y,e.maxWidth)},t.prototype.drawText=function(t,e){this.setText(t,{text:this.options.content,x:0,y:0,maxWidth:this.options.textRowMaxWidth||this.options.width}),e(t.canvas)},t.prototype.drawImage=function(t,e){var a=this;s(this.options.image).then((function(n){var i=a.getImageRect(n),o=i.width,r=i.height,d=a.getDrawImagePosition(o,r);t.drawImage(n,d.x,d.y,o,r),e(t.canvas)}))},t.prototype.drawMultiLineText=function(t,e){var a=this,n=this.recommendOptions.textLine.data,i=this.recommendOptions.textLine.yOffsetValue;n.forEach((function(e,n){a.setText(t,{text:e,x:0,y:a.options.lineHeight*n-i})})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var a,n,i=this,o=function(t,e){var a=d("svg",{xmlns:"http://www.w3.org/2000/svg"}),n=document.createElement("div");n.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),n.style.cssText="\n  text-align: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  font: ".concat(t.font,";\n  color: ").concat(e.fontColor,";\n"),n.innerHTML='<div class="rich-text-content">'.concat(e.content,"</div>"),document.body.appendChild(n);var i=n.querySelector(".rich-text-content"),o=i.offsetHeight,r=i.offsetWidth;document.body.removeChild(n);var l=e.richTextWidth||r||e.width,s=e.richTextHeight||o||e.height,c=d("foreignObject",{width:l.toString(),height:s.toString()});return c.appendChild(n),a.appendChild(c),{element:a,width:l,height:s}}(t,this.options);s((a=o.element,n=a.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),o.width,o.height).then((function(a){var n=i.getDrawImagePosition(a.width,a.height);t.drawImage(a,n.x,n.y,t.canvas.width,t.canvas.height),e(t.canvas)}))},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth||0,height:this.options.imageHeight||0};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.getDrawImagePosition=function(t,e){var a,n,i={x:-t/2,y:-e/2};switch(this.options.translatePlacement){case"top":i.x=-t/2,i.y=0;break;case"top-start":i.x=0,i.y=0;break;case"top-end":i.x=-t,i.y=0;break;case"bottom":i.x=-t/2,i.y=-e;break;case"bottom-start":i.x=0,i.y=-e;break;case"bottom-end":i.x=-t,i.y=-e;break;case"left":i.x=0,i.y=-e/2;break;case"right":i.x=-t,i.y=-e/2}return!r(null===(a=this.props)||void 0===a?void 0:a.translateX)&&(i.x=0),!r(null===(n=this.props)||void 0===n?void 0:n.translateY)&&(i.y=0),i},t.prototype.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var a;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(a=null==e?void 0:e.removedNodes)||void 0===a?void 0:a[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t.prototype.clearCanvas=function(){var t=this.canvas.getContext("2d");if(null===t)throw new Error("get context error");t.restore(),t.clearRect(0,0,this.canvas.width,this.canvas.height)},t}(),u=function(t){function a(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,a){if("function"!=typeof a&&null!==a)throw new TypeError("Class extends value "+String(a)+" is not a constructor or null");function n(){this.constructor=t}e(t,a),t.prototype=null===a?Object.create(a):(n.prototype=a.prototype,new n)}(a,t),a.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var a=new Image;a.src=e.url,a.onload=function(){var t,n=a.width,r=a.height,d=v.createCanvas(n,r),l=d.getContext("2d");if(null===l)throw new Error("get context error");l.drawImage(a,0,0,n,r),l.globalCompositeOperation=e.compositeOperation,l.fillStyle=e.fillColor,l.fillRect(0,0,n,r);var s=i(d);e.onSuccess&&o(e.onSuccess)&&(null===(t=e.onSuccess)||void 0===t||t.call(e,s))}}},a}(v);t.BlindWatermark=u,t.Watermark=v}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watermark-js-plus",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "watermark for the browser",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
@@ -44,41 +44,42 @@
     "dist"
   ],
   "devDependencies": {
-    "@babel/core": "^7.20.12",
+    "@babel/core": "^7.21.0",
     "@babel/eslint-parser": "^7.19.1",
-    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
-    "@commitlint/cli": "^17.4.2",
-    "@commitlint/config-conventional": "^17.4.2",
+    "@commitlint/cli": "^17.4.4",
+    "@commitlint/config-conventional": "^17.4.4",
     "@element-plus/icons-vue": "^2.0.10",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^24.0.0",
-    "@rollup/plugin-eslint": "^9.0.2",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-eslint": "^9.0.3",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.2",
-    "@rollup/plugin-terser": "0.3.0",
+    "@rollup/plugin-terser": "0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
     "@types/markdown-it": "^12.2.3",
-    "@typescript-eslint/parser": "^5.48.1",
+    "@typescript-eslint/parser": "^5.53.0",
     "@vue/theme": "^1.3.0",
     "concurrently": "^7.6.0",
     "conventional-changelog-angular": "^5.0.13",
     "conventional-changelog-cli": "^2.2.2",
-    "core-js": "^3.27.1",
-    "element-plus": "^2.2.28",
-    "eslint": "^8.32.0",
+    "core-js": "^3.28.0",
+    "element-plus": "^2.2.32",
+    "eslint": "^8.34.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-semistandard": "^17.0.0",
-    "eslint-plugin-import": "^2.27.4",
+    "eslint-plugin-import": "^2.27.5",
     "husky": "^8.0.3",
-    "lint-staged": "^13.1.0",
+    "lint-staged": "^13.1.2",
+    "lodash": "^4.17.21",
     "markdown-it": "^13.0.1",
-    "rollup": "^3.10.0",
+    "rollup": "^3.17.2",
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-your-function": "^0.4.9",
-    "terser": "^5.16.1",
-    "typescript": "^4.9.4",
-    "unplugin-element-plus": "^0.4.1",
-    "vitepress": "^1.0.0-alpha.36"
+    "terser": "^5.16.5",
+    "typescript": "^4.9.5",
+    "unplugin-element-plus": "^0.7.0",
+    "vitepress": "^1.0.0-alpha.47"
   }
 }