watermark-js-plus 0.4.0 → 0.5.1

package/dist/core/watermark.d.ts

@@ -33,6 +33,8 @@ export default class Watermark {
     private validateUnique;
     private validateContent;
     private draw;
+    private setTextStyle;
+    private setText;
     private drawText;
     private drawImage;
     private drawMultiLineText;

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export type TextBaselineType = 'alphabetic' | 'hanging' | 'ideographic' | 'top'
 export type CreateWatermarkModeType = 'default' | 'blind';
 export type DecodeBlindWatermarkModeType = 'canvas' | 'html' | 'svg';
 export type TranslatePlacementType = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right' | 'middle';
+export type TextType = 'fill' | 'stroke';
 export interface WatermarkDom extends HTMLDivElement {
     __WATERMARK__?: string;
     __WATERMARK__INSTANCE__?: any;
@@ -17,6 +18,8 @@ export interface WatermarkOptions {
     translateY?: number;
     contentType: ContentTypeType;
     content: string;
+    textType: TextType;
+    textRowMaxWidth?: number;
     image?: string;
     imageWidth: number;
     imageHeight: number;

package/dist/watermark.esm.js

@@ -148,6 +148,7 @@ var Watermark = /** @class */ (function () {
             translatePlacement: 'middle',
             contentType: 'text',
             content: 'hello watermark-js-plus',
+            textType: 'fill',
             imageWidth: 0,
             imageHeight: 0,
             lineHeight: 30,
@@ -349,7 +350,7 @@ var Watermark = /** @class */ (function () {
         ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
         this.options.textAlign && (ctx.textAlign = this.options.textAlign);
         this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
-        ctx.fillStyle = this.options.fontColor;
+        this.setTextStyle(ctx);
         ctx.globalAlpha = this.options.globalAlpha;
         ctx.translate(this.options.translateX, this.options.translateY);
         ctx.rotate(this.options.rotate);
@@ -370,8 +371,27 @@ var Watermark = /** @class */ (function () {
             }
         });
     };
+    Watermark.prototype.setTextStyle = function (ctx) {
+        var propName = 'fillStyle';
+        if (this.options.textType === 'stroke') {
+            propName = 'strokeStyle';
+        }
+        ctx[propName] && (ctx[propName] = this.options.fontColor);
+    };
+    Watermark.prototype.setText = function (ctx, params) {
+        var methodName = 'fillText';
+        if (this.options.textType === 'stroke') {
+            methodName = 'strokeText';
+        }
+        ctx[methodName] && ctx[methodName](params.text, params.x, params.y, params.maxWidth);
+    };
     Watermark.prototype.drawText = function (ctx, resolve) {
-        ctx.fillText(this.options.content, 0, 0);
+        this.setText(ctx, {
+            text: this.options.content,
+            x: 0,
+            y: 0,
+            maxWidth: this.options.textRowMaxWidth
+        });
         resolve(ctx.canvas);
     };
     Watermark.prototype.drawImage = function (ctx, resolve) {
@@ -404,7 +424,8 @@ var Watermark = /** @class */ (function () {
         //   )
         //   resolve(canvas)
         // }
-        var lines = getMultiLineData(ctx, this.options.content, this.options.width);
+        var width = this.options.textRowMaxWidth || this.options.width;
+        var lines = getMultiLineData(ctx, this.options.content, width);
         var yOffsetValue;
         switch (this.options.textBaseline) {
             case 'middle':
@@ -420,8 +441,8 @@ var Watermark = /** @class */ (function () {
                 yOffsetValue = 0;
                 break;
         }
-        lines.forEach(function (txt, index) {
-            ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
+        lines.forEach(function (text, index) {
+            _this.setText(ctx, { text: text, x: 0, y: _this.options.lineHeight * index - yOffsetValue });
         });
         resolve(ctx.canvas);
     };

package/dist/watermark.umd.js

@@ -154,6 +154,7 @@
                 translatePlacement: 'middle',
                 contentType: 'text',
                 content: 'hello watermark-js-plus',
+                textType: 'fill',
                 imageWidth: 0,
                 imageHeight: 0,
                 lineHeight: 30,
@@ -355,7 +356,7 @@
             ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
             this.options.textAlign && (ctx.textAlign = this.options.textAlign);
             this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
-            ctx.fillStyle = this.options.fontColor;
+            this.setTextStyle(ctx);
             ctx.globalAlpha = this.options.globalAlpha;
             ctx.translate(this.options.translateX, this.options.translateY);
             ctx.rotate(this.options.rotate);
@@ -376,8 +377,27 @@
                 }
             });
         };
+        Watermark.prototype.setTextStyle = function (ctx) {
+            var propName = 'fillStyle';
+            if (this.options.textType === 'stroke') {
+                propName = 'strokeStyle';
+            }
+            ctx[propName] && (ctx[propName] = this.options.fontColor);
+        };
+        Watermark.prototype.setText = function (ctx, params) {
+            var methodName = 'fillText';
+            if (this.options.textType === 'stroke') {
+                methodName = 'strokeText';
+            }
+            ctx[methodName] && ctx[methodName](params.text, params.x, params.y, params.maxWidth);
+        };
         Watermark.prototype.drawText = function (ctx, resolve) {
-            ctx.fillText(this.options.content, 0, 0);
+            this.setText(ctx, {
+                text: this.options.content,
+                x: 0,
+                y: 0,
+                maxWidth: this.options.textRowMaxWidth
+            });
             resolve(ctx.canvas);
         };
         Watermark.prototype.drawImage = function (ctx, resolve) {
@@ -410,7 +430,8 @@
             //   )
             //   resolve(canvas)
             // }
-            var lines = getMultiLineData(ctx, this.options.content, this.options.width);
+            var width = this.options.textRowMaxWidth || this.options.width;
+            var lines = getMultiLineData(ctx, this.options.content, width);
             var yOffsetValue;
             switch (this.options.textBaseline) {
                 case 'middle':
@@ -426,8 +447,8 @@
                     yOffsetValue = 0;
                     break;
             }
-            lines.forEach(function (txt, index) {
-                ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
+            lines.forEach(function (text, index) {
+                _this.setText(ctx, { text: text, x: 0, y: _this.options.lineHeight * index - yOffsetValue });
             });
             resolve(ctx.canvas);
         };

package/dist/watermark.umd.min.js

@@ -1 +1 @@
-!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,o){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},e(t,o)};function o(t,e,o,n){return new(o||(o=Promise))((function(i,r){function a(t){try{c(n.next(t))}catch(t){r(t)}}function s(t){try{c(n.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(a,s)}c((n=n.apply(t,e||[])).next())}))}function n(t,e){var o,n,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(o)throw new TypeError("Generator is already executing.");for(;a;)try{if(o=1,n&&(i=2&r[0]?n.return:r[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;switch(n=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,n=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],n=0}finally{o=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i=function(t){return t.toDataURL("image/png",1)},r=function(t){return void 0===t},a=function(t,e,o){void 0===e&&(e={}),void 0===o&&(o="http://www.w3.org/2000/svg");var n=document.createElementNS(o,t);for(var i in e)n.setAttribute(i,e[i]);return n},s=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",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",fontColor:"#000",globalAlpha:.5,fontWeight:"normal",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,e){var o,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===(o=i.getContext("2d"))||void 0===o||o.setTransform(n,0,0,n,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return o(this,void 0,void 0,(function(){var o,r,a,s;return n(this,(function(n){switch(n.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return o=n.sent(),r=i(o),this.watermarkDom=document.createElement("div"),a=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,s=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===s?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n    "),a.style.cssText="\n      position: ".concat("root"===s?"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(r,");\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(a),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,o,n,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(o=this.observer)||void 0===o||o.disconnect(),null===(n=this.parentObserve)||void 0===n||n.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.initializeOptions=function(){var t,e,o,n,i,a,s,c,h;(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",p="center";switch(this.options.translatePlacement){case"top":c=this.options.width/2,h=0,l="top";break;case"top-start":c=0,h=0,l="top",p="start";break;case"top-end":c=this.options.width,h=0,l="top",p="end";break;case"bottom":c=this.options.width/2,h=this.options.height,l="bottom";break;case"bottom-start":c=0,h=this.options.height,l="bottom",p="start";break;case"bottom-end":c=this.options.width,h=this.options.height,l="bottom",p="end";break;case"left":c=0,h=this.options.height/2,p="start";break;case"right":c=this.options.width,h=this.options.height/2,p="end";break;case"middle":c=this.options.width/2,h=this.options.height/2}r(null===(e=this.props)||void 0===e?void 0:e.translateX)&&r(null===(o=this.props)||void 0===o?void 0:o.translateY)||(l="top",p="left"),r(null===(n=this.props)||void 0===n?void 0:n.translateX)&&(this.options.translateX=c),r(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(this.options.translateY=h),r(null===(a=this.props)||void 0===a?void 0:a.textBaseline)&&(this.options.textBaseline=l),r(null===(s=this.props)||void 0===s?void 0:s.textAlign)&&(this.options.textAlign=p)},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 e=this,o=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===o)throw new Error("get context error");return o.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),this.options.textAlign&&(o.textAlign=this.options.textAlign),this.options.textBaseline&&(o.textBaseline=this.options.textBaseline),o.fillStyle=this.options.fontColor,o.globalAlpha=this.options.globalAlpha,o.translate(this.options.translateX,this.options.translateY),o.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(o,t);break;case"image":e.drawImage(o,t);break;case"multi-line-text":e.drawMultiLineText(o,t);break;case"rich-text":e.drawRichText(o,t)}}))},t.prototype.drawText=function(t,e){t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var o=this,n=new Image;n.setAttribute("crossOrigin","Anonymous"),n.src=this.options.image,n.onload=function(){var i=o.getImageRect(n),r=i.width,a=i.height,s=o.getDrawImagePosition(r,a);t.drawImage(n,s.x,s.y,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var o,n=this,i=function(t,e,o){for(var n=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>o&&(n.push(i.substring(0,i.length-1)),i="",r--);return n.push(i),n}(t,this.options.content,this.options.width);switch(this.options.textBaseline){case"middle":o=(i.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(i.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}i.forEach((function(e,i){t.fillText(e,0,n.options.lineHeight*i-o)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var o,n,i=this,r=function(t,e){var o=a("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"),r=i.offsetHeight,s=i.offsetWidth;document.body.removeChild(n);var c=e.richTextWidth||s||e.width,h=e.richTextHeight||r||e.height,l=a("foreignObject",{width:c.toString(),height:h.toString()});return l.appendChild(n),o.appendChild(l),{element:o,width:c,height:h}}(t,this.options),s=new Image;s.width=r.width,s.height=r.height,s.src=(o=r.element,n=o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),s.onload=function(){var o=i.getDrawImagePosition(s.width,s.height);t.drawImage(s,o.x,o.y,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};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 o,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===(o=this.props)||void 0===o?void 0:o.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 o;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(o=null==e?void 0:e.removedNodes)||void 0===o?void 0:o[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),c=function(t){function o(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}(o,t),o.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var o=new Image;o.src=e.url,o.onload=function(){var t,n=o.width,r=o.height,a=s.createCanvas(n,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(o,0,0,n,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,n,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},o}(s);t.BlindWatermark=c,t.Watermark=s}));
+!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,o){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o])},e(t,o)};function o(t,e,o,n){return new(o||(o=Promise))((function(i,r){function a(t){try{c(n.next(t))}catch(t){r(t)}}function s(t){try{c(n.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(a,s)}c((n=n.apply(t,e||[])).next())}))}function n(t,e){var o,n,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(o)throw new TypeError("Generator is already executing.");for(;a;)try{if(o=1,n&&(i=2&r[0]?n.return:r[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,r[1])).done)return i;switch(n=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,n=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],n=0}finally{o=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i=function(t){return t.toDataURL("image/png",1)},r=function(t){return void 0===t},a=function(t,e,o){void 0===e&&(e={}),void 0===o&&(o="http://www.w3.org/2000/svg");var n=document.createElementNS(o,t);for(var i in e)n.setAttribute(i,e[i]);return n},s=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:20,fontFamily:"sans-serif",fontColor:"#000",globalAlpha:.5,fontWeight:"normal",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,e){var o,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===(o=i.getContext("2d"))||void 0===o||o.setTransform(n,0,0,n,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return o(this,void 0,void 0,(function(){var o,r,a,s;return n(this,(function(n){switch(n.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return o=n.sent(),r=i(o),this.watermarkDom=document.createElement("div"),a=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,s=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===s?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n    "),a.style.cssText="\n      position: ".concat("root"===s?"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(r,");\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(a),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,o,n,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(o=this.observer)||void 0===o||o.disconnect(),null===(n=this.parentObserve)||void 0===n||n.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.initializeOptions=function(){var t,e,o,n,i,a,s,c,h;(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",p="center";switch(this.options.translatePlacement){case"top":c=this.options.width/2,h=0,l="top";break;case"top-start":c=0,h=0,l="top",p="start";break;case"top-end":c=this.options.width,h=0,l="top",p="end";break;case"bottom":c=this.options.width/2,h=this.options.height,l="bottom";break;case"bottom-start":c=0,h=this.options.height,l="bottom",p="start";break;case"bottom-end":c=this.options.width,h=this.options.height,l="bottom",p="end";break;case"left":c=0,h=this.options.height/2,p="start";break;case"right":c=this.options.width,h=this.options.height/2,p="end";break;case"middle":c=this.options.width/2,h=this.options.height/2}r(null===(e=this.props)||void 0===e?void 0:e.translateX)&&r(null===(o=this.props)||void 0===o?void 0:o.translateY)||(l="top",p="left"),r(null===(n=this.props)||void 0===n?void 0:n.translateX)&&(this.options.translateX=c),r(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(this.options.translateY=h),r(null===(a=this.props)||void 0===a?void 0:a.textBaseline)&&(this.options.textBaseline=l),r(null===(s=this.props)||void 0===s?void 0:s.textAlign)&&(this.options.textAlign=p)},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 e=this,o=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===o)throw new Error("get context error");return o.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),this.options.textAlign&&(o.textAlign=this.options.textAlign),this.options.textBaseline&&(o.textBaseline=this.options.textBaseline),this.setTextStyle(o),o.globalAlpha=this.options.globalAlpha,o.translate(this.options.translateX,this.options.translateY),o.rotate(this.options.rotate),new Promise((function(t){switch(e.options.contentType){case"text":e.drawText(o,t);break;case"image":e.drawImage(o,t);break;case"multi-line-text":e.drawMultiLineText(o,t);break;case"rich-text":e.drawRichText(o,t)}}))},t.prototype.setTextStyle=function(t){var e="fillStyle";"stroke"===this.options.textType&&(e="strokeStyle"),t[e]&&(t[e]=this.options.fontColor)},t.prototype.setText=function(t,e){var o="fillText";"stroke"===this.options.textType&&(o="strokeText"),t[o]&&t[o](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}),e(t.canvas)},t.prototype.drawImage=function(t,e){var o=this,n=new Image;n.setAttribute("crossOrigin","Anonymous"),n.src=this.options.image,n.onload=function(){var i=o.getImageRect(n),r=i.width,a=i.height,s=o.getDrawImagePosition(r,a);t.drawImage(n,s.x,s.y,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var o,n=this,i=this.options.textRowMaxWidth||this.options.width,r=function(t,e,o){for(var n=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>o&&(n.push(i.substring(0,i.length-1)),i="",r--);return n.push(i),n}(t,this.options.content,i);switch(this.options.textBaseline){case"middle":o=(r.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(r.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}r.forEach((function(e,i){n.setText(t,{text:e,x:0,y:n.options.lineHeight*i-o})})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var o,n,i=this,r=function(t,e){var o=a("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"),r=i.offsetHeight,s=i.offsetWidth;document.body.removeChild(n);var c=e.richTextWidth||s||e.width,h=e.richTextHeight||r||e.height,l=a("foreignObject",{width:c.toString(),height:h.toString()});return l.appendChild(n),o.appendChild(l),{element:o,width:c,height:h}}(t,this.options),s=new Image;s.width=r.width,s.height=r.height,s.src=(o=r.element,n=o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),s.onload=function(){var o=i.getDrawImagePosition(s.width,s.height);t.drawImage(s,o.x,o.y,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};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 o,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===(o=this.props)||void 0===o?void 0:o.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 o;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(o=null==e?void 0:e.removedNodes)||void 0===o?void 0:o[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),c=function(t){function o(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode="blind",t.call(this,e)||this}return function(t,o){if("function"!=typeof o&&null!==o)throw new TypeError("Class extends value "+String(o)+" is not a constructor or null");function n(){this.constructor=t}e(t,o),t.prototype=null===o?Object.create(o):(n.prototype=o.prototype,new n)}(o,t),o.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:"canvas"},t);if(e.url&&"canvas"===e.mode){var o=new Image;o.src=e.url,o.onload=function(){var t,n=o.width,r=o.height,a=s.createCanvas(n,r),c=a.getContext("2d");if(null===c)throw new Error("get context error");c.drawImage(o,0,0,n,r),c.globalCompositeOperation=e.compositeOperation,c.fillStyle=e.fillColor,c.fillRect(0,0,n,r);var h=i(a);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,h))}}},o}(s);t.BlindWatermark=c,t.Watermark=s}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watermark-js-plus",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "watermark for the browser",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",