watermark-js-plus 0.0.4 → 0.2.0

package/dist/index.js

@@ -1,400 +0,0 @@
-(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

@@ -1 +0,0 @@
-!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}));