watermark-js-plus 0.0.3 → 0.0.4

package/dist/index.js

@@ -0,0 +1,400 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.watermark = {}));
+})(this, (function (exports) { 'use strict';
+
+  const convertImage = (canvas) => {
+      return canvas.toDataURL('image/png', 1);
+  };
+  const isFunction = (value) => {
+      return typeof value === 'function';
+  };
+  const createSVGElement = (tagName, attrs = {}, namespaceURI = 'http://www.w3.org/2000/svg') => {
+      const element = document.createElementNS(namespaceURI, tagName);
+      for (const attr in attrs) {
+          element.setAttribute(attr, attrs[attr]);
+      }
+      return element;
+  };
+  const getMultiLineData = (ctx, text, maxWidth) => {
+      const result = [];
+      let str = '';
+      for (let i = 0, len = text.length; i < len; i++) {
+          str += text.charAt(i);
+          if (ctx.measureText(str).width > maxWidth) {
+              result.push(str.substring(0, str.length - 1));
+              str = '';
+              i--;
+          }
+      }
+      result.push(str);
+      return result;
+  };
+  const createCustomContentSVG = (ctx, options) => {
+      const svgElement = createSVGElement('svg', {
+          xmlns: 'http://www.w3.org/2000/svg'
+      });
+      const foreignObjectElement = createSVGElement('foreignObject', {
+          width: options.width.toString(),
+          height: options.height.toString()
+      });
+      const bodyElement = document.createElement('div');
+      bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+      bodyElement.style.cssText = `
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font: ${ctx.font};
+  color: ${options.fontColor};
+  `;
+      bodyElement.innerHTML = options.content;
+      foreignObjectElement.appendChild(bodyElement);
+      svgElement.appendChild(foreignObjectElement);
+      return svgElement;
+  };
+  const convertSVGToImage = (svg) => {
+      const richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
+      return `data:image/svg+xml;charset=utf-8,${richContent}`;
+  };
+
+  exports.ContentTypeEnum = void 0;
+  (function (ContentTypeEnum) {
+      ContentTypeEnum["text"] = "text";
+      ContentTypeEnum["image"] = "image";
+      ContentTypeEnum["multiLineText"] = "multi-line-text";
+      ContentTypeEnum["richText"] = "rich-text";
+  })(exports.ContentTypeEnum || (exports.ContentTypeEnum = {}));
+  exports.TextAlignEnum = void 0;
+  (function (TextAlignEnum) {
+      TextAlignEnum["center"] = "center";
+      TextAlignEnum["left"] = "left";
+      TextAlignEnum["right"] = "right";
+  })(exports.TextAlignEnum || (exports.TextAlignEnum = {}));
+  exports.TextBaselineEnum = void 0;
+  (function (TextBaselineEnum) {
+      TextBaselineEnum["top"] = "top";
+      TextBaselineEnum["bottom"] = "bottom";
+      TextBaselineEnum["middle"] = "middle";
+  })(exports.TextBaselineEnum || (exports.TextBaselineEnum = {}));
+  exports.CreateWatermarkModeEnum = void 0;
+  (function (CreateWatermarkModeEnum) {
+      CreateWatermarkModeEnum["default"] = "default";
+      CreateWatermarkModeEnum["blind"] = "blind";
+  })(exports.CreateWatermarkModeEnum || (exports.CreateWatermarkModeEnum = {}));
+  exports.DecodeBlindWatermarkModeEnum = void 0;
+  (function (DecodeBlindWatermarkModeEnum) {
+      DecodeBlindWatermarkModeEnum["canvas"] = "canvas";
+      DecodeBlindWatermarkModeEnum["html"] = "html";
+      DecodeBlindWatermarkModeEnum["svg"] = "svg";
+  })(exports.DecodeBlindWatermarkModeEnum || (exports.DecodeBlindWatermarkModeEnum = {}));
+
+  class Watermark {
+      options;
+      parentElement = document.body;
+      observer;
+      parentObserve;
+      watermarkDom;
+      constructor(props = {}) {
+          this.options = Object.assign({
+              width: 300,
+              height: 300,
+              rotate: 45,
+              contentType: exports.ContentTypeEnum.text,
+              content: 'hello watermark-js-plus',
+              imageWidth: 0,
+              imageHeight: 0,
+              lineHeight: 30,
+              zIndex: 10000,
+              backgroundPosition: '0 0, 0 0',
+              fontSize: 20,
+              fontFamily: 'sans-serif',
+              textAlign: exports.TextAlignEnum.center,
+              textBaseline: exports.TextBaselineEnum.middle,
+              fontColor: '#000',
+              globalAlpha: 0.5,
+              fontWeight: 'normal',
+              mode: exports.CreateWatermarkModeEnum.default,
+              mutationObserve: true,
+              unique: true,
+              parent: 'body',
+              onSuccess: () => { },
+              onBeforeDestroy: () => { },
+              onDestroyed: () => { }
+          }, props);
+          if (this.options?.rotate) {
+              this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
+          }
+          this.changeParentElement(this.options.parent);
+      }
+      static createCanvas(width, height) {
+          const ratio = window.devicePixelRatio || 1;
+          const canvas = document.createElement('canvas');
+          canvas.width = width * ratio; // 实际渲染像素
+          canvas.height = height * ratio; // 实际渲染像素
+          canvas.style.width = `${width}px`; // 控制显示大小
+          canvas.style.height = `${height}px`; // 控制显示大小
+          canvas.getContext('2d')?.setTransform(ratio, 0, 0, ratio, 0, 0);
+          return canvas;
+      }
+      changeParentElement(parent) {
+          if (typeof parent === 'string') {
+              const parentElement = document.querySelector(parent);
+              parentElement && (this.parentElement = parentElement);
+          }
+          else {
+              this.parentElement = parent;
+          }
+      }
+      async create() {
+          if (!this.validateUnique()) {
+              return;
+          }
+          if (!this.validateContent()) {
+              return;
+          }
+          const canvas = await this.draw();
+          const image = convertImage(canvas);
+          this.watermarkDom = document.createElement('div');
+          const watermarkInnerDom = document.createElement('div');
+          this.watermarkDom.__WATERMARK__ = 'watermark';
+          this.watermarkDom.__WATERMARK__INSTANCE__ = this;
+          this.watermarkDom.style.cssText = `
+      z-index: ${this.options.zIndex};
+      position: relative;
+    `;
+          watermarkInnerDom.style.cssText = `
+      position: fixed;
+      z-index: ${this.options.zIndex};
+      pointer-events: none;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-image: url(${image});
+      background-repeat: repeat;
+      background-size: ${this.options.width}px ${this.options.height}px;
+      background-position: ${this.options.backgroundPosition};
+      -webkit-print-color-adjust: exact;
+    `;
+          this.watermarkDom.append(watermarkInnerDom);
+          this.parentElement.appendChild(this.watermarkDom);
+          if (this.options.mutationObserve) {
+              this.bindMutationObserve();
+          }
+          this.options.onSuccess?.();
+      }
+      destroy() {
+          this.options.onBeforeDestroy?.();
+          this.observer?.disconnect();
+          this.parentObserve?.disconnect();
+          this.watermarkDom?.remove();
+          this.options.onDestroyed?.();
+      }
+      validateUnique() {
+          let result = true;
+          if (this.options.unique) {
+              this.parentElement.childNodes.forEach(node => {
+                  if (!result) {
+                      return;
+                  }
+                  if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
+                      result = false;
+                      // throw new Error('duplicate watermark error')
+                  }
+              });
+          }
+          return result;
+      }
+      validateContent() {
+          switch (this.options.contentType) {
+              case exports.ContentTypeEnum.image:
+                  return Object.hasOwnProperty.call(this.options, 'image');
+              case exports.ContentTypeEnum.multiLineText:
+              case exports.ContentTypeEnum.richText:
+              case exports.ContentTypeEnum.text:
+                  return this.options.content.length > 0;
+          }
+          return false;
+      }
+      draw() {
+          const canvas = Watermark.createCanvas(this.options.width, this.options.height);
+          // document.body?.appendChild(canvas)
+          const ctx = canvas.getContext('2d');
+          if (ctx === null) {
+              throw new Error('get context error');
+          }
+          ctx.font = `${this.options.fontWeight} ${this.options.fontSize}px ${this.options.fontFamily}`;
+          ctx.textAlign = this.options.textAlign;
+          ctx.textBaseline = this.options.textBaseline;
+          ctx.fillStyle = this.options.fontColor;
+          ctx.globalAlpha = this.options.globalAlpha;
+          return new Promise((resolve) => {
+              switch (this.options.contentType) {
+                  case exports.ContentTypeEnum.text:
+                      this.drawText(ctx, resolve);
+                      break;
+                  case exports.ContentTypeEnum.image:
+                      this.drawImage(ctx, resolve);
+                      break;
+                  case exports.ContentTypeEnum.multiLineText:
+                      this.drawMultiLineText(ctx, resolve);
+                      break;
+                  case exports.ContentTypeEnum.richText:
+                      this.drawRichText(ctx, resolve);
+                      break;
+              }
+          });
+      }
+      drawText(ctx, resolve) {
+          ctx.translate(this.options.width / 2, this.options.height / 2);
+          ctx.rotate(this.options.rotate);
+          ctx.fillText(this.options.content, 0, 0);
+          resolve(ctx.canvas);
+      }
+      drawImage(ctx, resolve) {
+          const image = new Image();
+          image.setAttribute('crossOrigin', 'Anonymous');
+          image.src = this.options.image;
+          image.onload = () => {
+              ctx.translate(this.options.width / 2, this.options.height / 2);
+              ctx.rotate(this.options.rotate);
+              const { width: imageWidth, height: imageHeight } = this.getImageRect(image);
+              ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
+              resolve(ctx.canvas);
+          };
+      }
+      drawMultiLineText(ctx, resolve) {
+          // image.width = this.options.width
+          // image.height = this.options.height
+          // const element = createCustomContentSvg(context, this.options)
+          // image.src = convertSVGToImage(element)
+          // image.onload = () => {
+          //   context.translate(this.options.width / 2, this.options.height / 2)
+          //   context.rotate(this.options.rotate)
+          //   context.drawImage(
+          //     image,
+          //     -this.options.width / 2,
+          //     -this.options.height / 2,
+          //     context.canvas.width,
+          //     context.canvas.height
+          //   )
+          //   resolve(canvas)
+          // }
+          const lines = getMultiLineData(ctx, this.options.content, this.options.width);
+          ctx.translate(this.options.width / 2, this.options.height / 2);
+          ctx.rotate(this.options.rotate);
+          const yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
+          lines.forEach((txt, index) => {
+              ctx.fillText(txt, 0, this.options.lineHeight * index - yOffsetValue);
+          });
+          resolve(ctx.canvas);
+      }
+      drawRichText(ctx, resolve) {
+          const image = new Image();
+          image.width = this.options.width;
+          image.height = this.options.height;
+          const element = createCustomContentSVG(ctx, this.options);
+          image.src = convertSVGToImage(element);
+          image.onload = () => {
+              ctx.translate(this.options.width / 2, this.options.height / 2);
+              ctx.rotate(this.options.rotate);
+              ctx.drawImage(image, -this.options.width / 2, -this.options.height / 2, ctx.canvas.width, ctx.canvas.height);
+              resolve(ctx.canvas);
+          };
+      }
+      getImageRect(image) {
+          const rect = { width: this.options.imageWidth, height: this.options.imageHeight };
+          switch (true) {
+              case rect.width !== 0 && rect.height === 0:
+                  rect.height = rect.width * image.height / image.width;
+                  break;
+              case rect.width === 0 && rect.height !== 0:
+                  rect.width = rect.height * image.width / image.height;
+                  break;
+              case rect.width === 0 && rect.height === 0:
+                  rect.width = image.width;
+                  rect.height = image.height;
+                  break;
+          }
+          return rect;
+      }
+      bindMutationObserve() {
+          if (!this.watermarkDom) {
+              return;
+          }
+          this.observer = new MutationObserver((mutationsList) => {
+              if (mutationsList.length > 0) {
+                  this.destroy();
+                  this.create();
+              }
+          });
+          this.observer.observe(this.watermarkDom, {
+              attributes: true,
+              childList: true,
+              subtree: true,
+              characterData: true // 节点内容或节点文本的变动。
+          });
+          this.parentObserve = new MutationObserver((mutationsList) => {
+              mutationsList.forEach(item => {
+                  if (item?.target === this.watermarkDom || item?.removedNodes?.[0] === this.watermarkDom) {
+                      this.destroy();
+                      this.create();
+                  }
+              });
+          });
+          this.parentObserve.observe(this.parentElement, {
+              attributes: true,
+              childList: true,
+              subtree: true,
+              characterData: true // 节点内容或节点文本的变动。
+          });
+      }
+  }
+
+  class BlindWatermark extends Watermark {
+      constructor(props = {}) {
+          props.globalAlpha = 0.005;
+          props.mode = exports.CreateWatermarkModeEnum.blind;
+          super(props);
+      }
+      static decode(props) {
+          const options = Object.assign({
+              url: '',
+              fillColor: '#000',
+              compositeOperation: 'color-burn',
+              mode: exports.DecodeBlindWatermarkModeEnum.canvas
+          }, props);
+          if (!options.url) {
+              return;
+          }
+          if (options.mode === exports.DecodeBlindWatermarkModeEnum.canvas) {
+              const img = new Image();
+              img.src = options.url;
+              img.onload = () => {
+                  const { width, height } = img;
+                  const canvas = Watermark.createCanvas(width, height);
+                  const ctx = canvas.getContext('2d');
+                  if (ctx === null) {
+                      throw new Error('get context error');
+                  }
+                  ctx.drawImage(img, 0, 0, width, height);
+                  ctx.globalCompositeOperation = options.compositeOperation;
+                  ctx.fillStyle = options.fillColor;
+                  ctx.fillRect(0, 0, width, height);
+                  const resultImage = convertImage(canvas);
+                  if (options.onSuccess && isFunction(options.onSuccess)) {
+                      options.onSuccess?.(resultImage);
+                  }
+              };
+          }
+      }
+  }
+
+  exports.BlindWatermark = BlindWatermark;
+  exports.Watermark = Watermark;
+
+}));

package/dist/index.min.js

@@ -0,0 +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";const e=t=>t.toDataURL("image/png",1),n=(t,e={},n="http://www.w3.org/2000/svg")=>{const i=document.createElementNS(n,t);for(const t in e)i.setAttribute(t,e[t]);return i};var i,o,s,a,r;t.ContentTypeEnum=void 0,(i=t.ContentTypeEnum||(t.ContentTypeEnum={})).text="text",i.image="image",i.multiLineText="multi-line-text",i.richText="rich-text",t.TextAlignEnum=void 0,(o=t.TextAlignEnum||(t.TextAlignEnum={})).center="center",o.left="left",o.right="right",t.TextBaselineEnum=void 0,(s=t.TextBaselineEnum||(t.TextBaselineEnum={})).top="top",s.bottom="bottom",s.middle="middle",t.CreateWatermarkModeEnum=void 0,(a=t.CreateWatermarkModeEnum||(t.CreateWatermarkModeEnum={})).default="default",a.blind="blind",t.DecodeBlindWatermarkModeEnum=void 0,(r=t.DecodeBlindWatermarkModeEnum||(t.DecodeBlindWatermarkModeEnum={})).canvas="canvas",r.html="html",r.svg="svg";class h{options;parentElement=document.body;observer;parentObserve;watermarkDom;constructor(e={}){this.options=Object.assign({width:300,height:300,rotate:45,contentType:t.ContentTypeEnum.text,content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",fontSize:20,fontFamily:"sans-serif",textAlign:t.TextAlignEnum.center,textBaseline:t.TextBaselineEnum.middle,fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:t.CreateWatermarkModeEnum.default,mutationObserve:!0,unique:!0,parent:"body",onSuccess:()=>{},onBeforeDestroy:()=>{},onDestroyed:()=>{}},e),this.options?.rotate&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180)),this.changeParentElement(this.options.parent)}static createCanvas(t,e){const n=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*n,i.height=e*n,i.style.width=`${t}px`,i.style.height=`${e}px`,i.getContext("2d")?.setTransform(n,0,0,n,0,0),i}changeParentElement(t){if("string"==typeof t){const e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t}async create(){if(!this.validateUnique())return;if(!this.validateContent())return;const t=await this.draw(),n=e(t);this.watermarkDom=document.createElement("div");const i=document.createElement("div");this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,this.watermarkDom.style.cssText=`\n      z-index: ${this.options.zIndex};\n      position: relative;\n    `,i.style.cssText=`\n      position: fixed;\n      z-index: ${this.options.zIndex};\n      pointer-events: none;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      background-image: url(${n});\n      background-repeat: repeat;\n      background-size: ${this.options.width}px ${this.options.height}px;\n      background-position: ${this.options.backgroundPosition};\n      -webkit-print-color-adjust: exact;\n    `,this.watermarkDom.append(i),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),this.options.onSuccess?.()}destroy(){this.options.onBeforeDestroy?.(),this.observer?.disconnect(),this.parentObserve?.disconnect(),this.watermarkDom?.remove(),this.options.onDestroyed?.()}validateUnique(){let t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((e=>{t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t}validateContent(){switch(this.options.contentType){case t.ContentTypeEnum.image:return Object.hasOwnProperty.call(this.options,"image");case t.ContentTypeEnum.multiLineText:case t.ContentTypeEnum.richText:case t.ContentTypeEnum.text:return this.options.content.length>0}return!1}draw(){const e=h.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===e)throw new Error("get context error");return e.font=`${this.options.fontWeight} ${this.options.fontSize}px ${this.options.fontFamily}`,e.textAlign=this.options.textAlign,e.textBaseline=this.options.textBaseline,e.fillStyle=this.options.fontColor,e.globalAlpha=this.options.globalAlpha,new Promise((n=>{switch(this.options.contentType){case t.ContentTypeEnum.text:this.drawText(e,n);break;case t.ContentTypeEnum.image:this.drawImage(e,n);break;case t.ContentTypeEnum.multiLineText:this.drawMultiLineText(e,n);break;case t.ContentTypeEnum.richText:this.drawRichText(e,n)}}))}drawText(t,e){t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate),t.fillText(this.options.content,0,0),e(t.canvas)}drawImage(t,e){const n=new Image;n.setAttribute("crossOrigin","Anonymous"),n.src=this.options.image,n.onload=()=>{t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate);const{width:i,height:o}=this.getImageRect(n);t.drawImage(n,0-i/2,0-o/2,i,o),e(t.canvas)}}drawMultiLineText(t,e){const n=((t,e,n)=>{const i=[];let o="";for(let s=0,a=e.length;s<a;s++)o+=e.charAt(s),t.measureText(o).width>n&&(i.push(o.substring(0,o.length-1)),o="",s--);return i.push(o),i})(t,this.options.content,this.options.width);t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate);const i=(n.length-1)*this.options.lineHeight/2;n.forEach(((e,n)=>{t.fillText(e,0,this.options.lineHeight*n-i)})),e(t.canvas)}drawRichText(t,e){const i=new Image;i.width=this.options.width,i.height=this.options.height;const o=((t,e)=>{const i=n("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=n("foreignObject",{width:e.width.toString(),height:e.height.toString()}),s=document.createElement("div");return s.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),s.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: ${t.font};\n  color: ${e.fontColor};\n  `,s.innerHTML=e.content,o.appendChild(s),i.appendChild(o),i})(t,this.options);i.src=`data:image/svg+xml;charset=utf-8,${o.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23")}`,i.onload=()=>{t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate),t.drawImage(i,-this.options.width/2,-this.options.height/2,t.canvas.width,t.canvas.height),e(t.canvas)}}getImageRect(t){const 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}bindMutationObserve(){this.watermarkDom&&(this.observer=new MutationObserver((t=>{t.length>0&&(this.destroy(),this.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((t=>{t.forEach((t=>{t?.target!==this.watermarkDom&&t?.removedNodes?.[0]!==this.watermarkDom||(this.destroy(),this.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))}}t.BlindWatermark=class extends h{constructor(e={}){e.globalAlpha=.005,e.mode=t.CreateWatermarkModeEnum.blind,super(e)}static decode(n){const i=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:t.DecodeBlindWatermarkModeEnum.canvas},n);if(i.url&&i.mode===t.DecodeBlindWatermarkModeEnum.canvas){const t=new Image;t.src=i.url,t.onload=()=>{const{width:n,height:o}=t,s=h.createCanvas(n,o),a=s.getContext("2d");if(null===a)throw new Error("get context error");a.drawImage(t,0,0,n,o),a.globalCompositeOperation=i.compositeOperation,a.fillStyle=i.fillColor,a.fillRect(0,0,n,o);const r=e(s);i.onSuccess&&"function"==typeof i.onSuccess&&i.onSuccess?.(r)}}}},t.Watermark=h}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "watermark-js-plus",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "watermark for the browser",
   "type": "module",
   "scripts": {