watermark-js-plus 0.4.0 → 0.6.0

package/dist/core/watermark.d.ts

@@ -33,6 +33,8 @@ export default class Watermark {
     private validateUnique;
     private validateContent;
     private draw;
+    private setStyle;
+    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;
@@ -28,11 +31,15 @@ export interface WatermarkOptions {
     backgroundRepeat: string;
     fontSize: number;
     fontFamily: string;
+    fontStyle: string;
+    fontColor: string;
+    fontWeight: string;
     textAlign?: TextAlignType;
     textBaseline?: TextBaselineType;
-    fontColor: string;
+    filter: string;
+    shadowStyle?: Partial<CanvasShadowStyles>;
     globalAlpha: number;
-    fontWeight: string;
+    extraDrawFunc?: Function;
     mode: CreateWatermarkModeType;
     mutationObserve: boolean;
     unique: boolean;

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,
@@ -156,9 +157,11 @@ var Watermark = /** @class */ (function () {
             backgroundRepeat: 'repeat',
             fontSize: 20,
             fontFamily: 'sans-serif',
+            fontStyle: '',
             fontColor: '#000',
-            globalAlpha: 0.5,
             fontWeight: 'normal',
+            filter: 'none',
+            globalAlpha: 0.5,
             mode: 'default',
             mutationObserve: true,
             unique: true,
@@ -346,11 +349,7 @@ var Watermark = /** @class */ (function () {
         if (ctx === null) {
             throw new Error('get context error');
         }
-        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;
-        ctx.globalAlpha = this.options.globalAlpha;
+        this.setStyle(ctx);
         ctx.translate(this.options.translateX, this.options.translateY);
         ctx.rotate(this.options.rotate);
         return new Promise(function (resolve) {
@@ -370,8 +369,41 @@ var Watermark = /** @class */ (function () {
             }
         });
     };
+    Watermark.prototype.setStyle = function (ctx) {
+        var propName = 'fillStyle';
+        if (this.options.textType === 'stroke') {
+            propName = 'strokeStyle';
+        }
+        ctx[propName] && (ctx[propName] = this.options.fontColor);
+        ctx.font = "".concat(this.options.fontStyle, " ").concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
+        ctx.filter = this.options.filter;
+        this.options.textAlign && (ctx.textAlign = this.options.textAlign);
+        this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
+        ctx.globalAlpha = this.options.globalAlpha;
+        if (this.options.shadowStyle) {
+            ctx.shadowBlur = this.options.shadowStyle.shadowBlur || 0;
+            ctx.shadowColor = this.options.shadowStyle.shadowColor || '#00000000';
+            ctx.shadowOffsetX = this.options.shadowStyle.shadowOffsetX || 0;
+            ctx.shadowOffsetY = this.options.shadowStyle.shadowOffsetY || 0;
+        }
+        if (isFunction(this.options.extraDrawFunc)) {
+            this.options.extraDrawFunc(ctx);
+        }
+    };
+    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 +436,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 +453,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,
@@ -162,9 +163,11 @@
                 backgroundRepeat: 'repeat',
                 fontSize: 20,
                 fontFamily: 'sans-serif',
+                fontStyle: '',
                 fontColor: '#000',
-                globalAlpha: 0.5,
                 fontWeight: 'normal',
+                filter: 'none',
+                globalAlpha: 0.5,
                 mode: 'default',
                 mutationObserve: true,
                 unique: true,
@@ -352,11 +355,7 @@
             if (ctx === null) {
                 throw new Error('get context error');
             }
-            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;
-            ctx.globalAlpha = this.options.globalAlpha;
+            this.setStyle(ctx);
             ctx.translate(this.options.translateX, this.options.translateY);
             ctx.rotate(this.options.rotate);
             return new Promise(function (resolve) {
@@ -376,8 +375,41 @@
                 }
             });
         };
+        Watermark.prototype.setStyle = function (ctx) {
+            var propName = 'fillStyle';
+            if (this.options.textType === 'stroke') {
+                propName = 'strokeStyle';
+            }
+            ctx[propName] && (ctx[propName] = this.options.fontColor);
+            ctx.font = "".concat(this.options.fontStyle, " ").concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(this.options.fontFamily);
+            ctx.filter = this.options.filter;
+            this.options.textAlign && (ctx.textAlign = this.options.textAlign);
+            this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
+            ctx.globalAlpha = this.options.globalAlpha;
+            if (this.options.shadowStyle) {
+                ctx.shadowBlur = this.options.shadowStyle.shadowBlur || 0;
+                ctx.shadowColor = this.options.shadowStyle.shadowColor || '#00000000';
+                ctx.shadowOffsetX = this.options.shadowStyle.shadowOffsetX || 0;
+                ctx.shadowOffsetY = this.options.shadowStyle.shadowOffsetY || 0;
+            }
+            if (isFunction(this.options.extraDrawFunc)) {
+                this.options.extraDrawFunc(ctx);
+            }
+        };
+        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 +442,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 +459,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,s){function r(t){try{h(n.next(t))}catch(t){s(t)}}function a(t){try{h(n.throw(t))}catch(t){s(t)}}function h(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(r,a)}h((n=n.apply(t,e||[])).next())}))}function n(t,e){var o,n,i,s,r={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return s={next:a(0),throw:a(1),return:a(2)},"function"==typeof Symbol&&(s[Symbol.iterator]=function(){return this}),s;function a(s){return function(a){return function(s){if(o)throw new TypeError("Generator is already executing.");for(;r;)try{if(o=1,n&&(i=2&s[0]?n.return:s[0]?n.throw||((i=n.return)&&i.call(n),0):n.next)&&!(i=i.call(n,s[1])).done)return i;switch(n=0,i&&(s=[2&s[0],i.value]),s[0]){case 0:case 1:i=s;break;case 4:return r.label++,{value:s[1],done:!1};case 5:r.label++,n=s[1],s=[0];continue;case 7:s=r.ops.pop(),r.trys.pop();continue;default:if(!(i=r.trys,(i=i.length>0&&i[i.length-1])||6!==s[0]&&2!==s[0])){r=0;continue}if(3===s[0]&&(!i||s[1]>i[0]&&s[1]<i[3])){r.label=s[1];break}if(6===s[0]&&r.label<i[1]){r.label=i[1],i=s;break}if(i&&r.label<i[2]){r.label=i[2],r.ops.push(s);break}i[2]&&r.ops.pop(),r.trys.pop();continue}s=e.call(t,r)}catch(t){s=[6,t],n=0}finally{o=i=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,a])}}}var i=function(t){return t.toDataURL("image/png",1)},s=function(t){return"function"==typeof t},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},h=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",fontStyle:"",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,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,s,r,a;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(),s=i(o),this.watermarkDom=document.createElement("div"),r=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,a=this.checkParentElementType(),this.watermarkDom.style.cssText="\n      z-index: ".concat(this.options.zIndex,";\n      ").concat("custom"===a?"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"===a?"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(s,");\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,o,n,i,s,r;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===(r=(s=this.options).onDestroyed)||void 0===r||r.call(s)},t.prototype.initializeOptions=function(){var t,e,o,n,i,s,a,h,c;(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":h=this.options.width/2,c=0,l="top";break;case"top-start":h=0,c=0,l="top",p="start";break;case"top-end":h=this.options.width,c=0,l="top",p="end";break;case"bottom":h=this.options.width/2,c=this.options.height,l="bottom";break;case"bottom-start":h=0,c=this.options.height,l="bottom",p="start";break;case"bottom-end":h=this.options.width,c=this.options.height,l="bottom",p="end";break;case"left":h=0,c=this.options.height/2,p="start";break;case"right":h=this.options.width,c=this.options.height/2,p="end";break;case"middle":h=this.options.width/2,c=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=h),r(null===(i=this.props)||void 0===i?void 0:i.translateY)&&(this.options.translateY=c),r(null===(s=this.props)||void 0===s?void 0:s.textBaseline)&&(this.options.textBaseline=l),r(null===(a=this.props)||void 0===a?void 0:a.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 this.setStyle(o),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.setStyle=function(t){var e="fillStyle";"stroke"===this.options.textType&&(e="strokeStyle"),t[e]&&(t[e]=this.options.fontColor),t.font="".concat(this.options.fontStyle," ").concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").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),s(this.options.extraDrawFunc)&&this.options.extraDrawFunc(t)},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),s=i.width,r=i.height,a=o.getDrawImagePosition(s,r);t.drawImage(n,a.x,a.y,s,r),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var o,n=this,i=this.options.textRowMaxWidth||this.options.width,s=function(t,e,o){for(var n=[],i="",s=0,r=e.length;s<r;s++)i+=e.charAt(s),t.measureText(i).width>o&&(n.push(i.substring(0,i.length-1)),i="",s--);return n.push(i),n}(t,this.options.content,i);switch(this.options.textBaseline){case"middle":o=(s.length-1)*this.options.lineHeight/2;break;case"bottom":case"alphabetic":case"ideographic":o=(s.length-1)*this.options.lineHeight;break;case"top":case"hanging":o=0}s.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,s=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"),s=i.offsetHeight,r=i.offsetWidth;document.body.removeChild(n);var h=e.richTextWidth||r||e.width,c=e.richTextHeight||s||e.height,l=a("foreignObject",{width:h.toString(),height:c.toString()});return l.appendChild(n),o.appendChild(l),{element:o,width:h,height:c}}(t,this.options),r=new Image;r.width=s.width,r.height=s.height,r.src=(o=s.element,n=o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(n)),r.onload=function(){var o=i.getDrawImagePosition(r.width,r.height);t.drawImage(r,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=h.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 l=i(a);e.onSuccess&&s(e.onSuccess)&&(null===(t=e.onSuccess)||void 0===t||t.call(e,l))}}},o}(h);t.BlindWatermark=c,t.Watermark=h}));

package/package.json

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