watermark-js-plus 0.0.2 → 0.0.4

package/README.md

@@ -1 +1,88 @@
-# watermark-js-plus
+<p align="center">
+  <a href="https://zhensherlock.github.io/watermark-js-plus/" target="_blank" rel="noopener noreferrer">
+    <img width="300" src="https://zhensherlock.github.io/watermark-js-plus/hero-image.png" alt="watermark logo">
+  </a>
+</p>
+<p align="center">
+  <a href="https://npmjs.com/package/pinia"><img src="https://badgen.net/npm/v/pinia" alt="npm package"></a>
+  <a href="https://github.com/vuejs/pinia/actions/workflows/test.yml?query=branch%3Av2"><img src="https://github.com/vuejs/pinia/workflows/test/badge.svg?branch=v2" alt="build status"></a>
+  <a href="https://codecov.io/github/vuejs/pinia"><img src="https://badgen.net/codecov/c/github/vuejs/pinia/v2" alt="code coverage"></a>
+</p>
+
+# Watermark
+
+> This is a *canvas-based* watermark for browser.
+
+- 🛠️ Rich Features
+- 🔑 Fully Typed APIs
+- 📦️ Extremely light
+
+Watermark works with both Vue 2 , Vue 3 And React.
+
+# Translations
+
+* [中文文档](README_zh.md)
+
+## Installing
+
+```bash
+# or pnpm or yarn
+npm install watermark-js-plus
+```
+
+## Usage
+
+### Watermark
+
+```ts
+import { Watermark } from 'watermark-js-plus'
+
+const watermark = new Watermark({
+  content: 'hello my watermark',
+  width: 200,
+  height: 200,
+  onSuccess: () => {
+    // success callback
+  }
+})
+
+watermark.create()
+```
+
+### Blind Watermark
+
+```ts
+import { BlindWatermark } from 'watermark-js-plus'
+
+const watermark = new BlindWatermark({
+  content: 'hello my watermark',
+  width: 200,
+  height: 200,
+  onSuccess: () => {
+    // success callback
+  }
+})
+
+watermark.create()
+```
+
+### Decode Blind Watermark
+
+```js
+import { BlindWatermark } from 'watermark-js-plus'
+
+BlindWatermark.decode({
+  url: uploadFile.url, // image url
+  onSuccess: (imageBase64) => {
+    // success callback
+  }
+})
+```
+
+## Documentation
+
+To learn more, check [its documentation](https://zhensherlock.github.io/watermark-js-plus).
+
+## License
+
+[MIT](LICENSE).

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,16 +1,15 @@
 {
   "name": "watermark-js-plus",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "watermark for the browser",
-  "main": "lib/watermark.js",
   "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky install",
     "lint": "npx eslint \"src/*.{ts,js}\"",
     "dev": "concurrently \"npm run src:dev\" \"npm run docs:dev\"",
-    "src:dev": "rollup -c --watch",
-    "build": "rollup -c --environment NODE_ENV:production && rollup -c",
+    "src:dev": "rollup -c --watch --bundleConfigAsCjs",
+    "build": "rollup -c --bundleConfigAsCjs --environment NODE_ENV:production",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 -n changelog-option.cjs",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
@@ -37,6 +36,19 @@
     "防删除水印",
     "解密水印"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
@@ -46,14 +58,14 @@
     "@commitlint/config-conventional": "^17.3.0",
     "@element-plus/icons-vue": "^2.0.10",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-commonjs": "^23.0.4",
     "@rollup/plugin-eslint": "^9.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
-    "@rollup/plugin-terser": "^0.1.0",
+    "@rollup/plugin-terser": "^0.2.0",
     "@rollup/plugin-typescript": "^10.0.1",
     "@types/markdown-it": "^12.2.3",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.1",
     "@vue/theme": "^1.3.0",
     "concurrently": "^7.6.0",
     "conventional-changelog-angular": "^5.0.13",
@@ -67,12 +79,12 @@
     "husky": "^8.0.2",
     "lint-staged": "^13.1.0",
     "markdown-it": "^13.0.1",
-    "rollup": "^3.5.1",
+    "rollup": "^3.7.0",
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-your-function": "^0.4.3",
     "terser": "^5.16.1",
-    "typescript": "^4.9.3",
+    "typescript": "^4.9.4",
     "unplugin-element-plus": "^0.4.1",
-    "vitepress": "^1.0.0-alpha.29"
+    "vitepress": "^1.0.0-alpha.30"
   }
 }

package/.editorconfig

@@ -1,16 +0,0 @@
-# http://editorconfig.org
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[Makefile]
-indent_style = tab

package/.eslintignore

@@ -1,7 +0,0 @@
-*/build/*.js
-*/public
-dist
-.husky/
-lib
-*/node_modules
-package-lock.json

package/.eslintrc.cjs

@@ -1,46 +0,0 @@
-module.exports = {
-  parser: '@typescript-eslint/parser', // 解析器，默认使用Espree
-  env: { // 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
-    browser: true, // 运行在浏览器
-    es2021: true, // 支持es2021
-    es6: true,
-  },
-  extends: [ // 使用的外部代码格式化配置文件
-    'semistandard',
-    'plugin:import/recommended'
-  ],
-  plugins: [
-    'import'
-  ],
-  parserOptions: {
-    ecmaVersion: 12, // ecmaVersion 用来指定支持的 ECMAScript 版本 。默认为 5，即仅支持es5
-    sourceType: 'module',
-  },
-  globals: { // 脚本在执行期间访问的额外的全局变量
-    describe: true,
-    it: true,
-    after: true,
-    before: true,
-    afterEach: true,
-    beforeEach: true,
-    __BUILD__: true,
-    __DEV__: true,
-    __SIT__: true,
-    __UAT__: true,
-    __PROD__: true
-  },
-  rules: {
-    // 启用的规则及其各自的错误级别。0(off)  1(warning)  2(error)
-    'no-console': 0,
-    semi: [1, 'never'],
-    quotes: [1, 'single'],
-    'no-unused-vars': 0,
-  },
-  settings: {
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx']
-      }
-    }
-  },
-};

package/.github/workflows/deploy.yml

@@ -1,29 +0,0 @@
-name: deploy
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          cache: npm
-      - run: npm ci
-
-      - name: Build
-        run: yarn docs:build
-
-      - name: Deploy
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: docs/.vitepress/dist
-          # cname: example.com # if wanna deploy to custom domain