watermark-js-plus 0.0.4 → 0.1.0

package/README.md

@@ -4,9 +4,7 @@
   </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>
+  <a href="https://npmjs.com/package/watermark-js-plus"><img src="https://badgen.net/npm/v/watermark-js-plus" alt="npm package"></a>
 </p>
 
 # Watermark

package/dist/core/blind.d.ts

@@ -0,0 +1,17 @@
+import { DecodeBlindWatermarkOptions, WatermarkOptions } from '../types';
+import Watermark from './watermark';
+/**
+ * BlindWatermark class
+ */
+export default class BlindWatermark extends Watermark {
+    /**
+     * BlindWatermark constructor
+     * @param props - blind watermark options
+     */
+    constructor(props?: Partial<WatermarkOptions>);
+    /**
+     * Decode blind watermark.
+     * @param props - decode options
+     */
+    static decode(props: Partial<DecodeBlindWatermarkOptions>): void;
+}

package/dist/core/watermark.d.ts

@@ -0,0 +1,40 @@
+import { WatermarkOptions } from '../types';
+/**
+ * Watermark class
+ */
+export default class Watermark {
+    private readonly options;
+    private parentElement;
+    private observer?;
+    private parentObserve?;
+    private watermarkDom?;
+    /**
+     * Watermark constructor
+     * @param props - watermark options
+     */
+    constructor(props?: Partial<WatermarkOptions>);
+    /**
+     * Create an HD canvas.
+     * @param width - width of canvas
+     * @param height - height of canvas
+     */
+    static createCanvas(width: number, height: number): HTMLCanvasElement;
+    changeParentElement(parent: Element | string): void;
+    /**
+     * Creating a watermark.
+     */
+    create(): Promise<void>;
+    /**
+     * Deleting this watermark.
+     */
+    destroy(): void;
+    private validateUnique;
+    private validateContent;
+    private draw;
+    private drawText;
+    private drawImage;
+    private drawMultiLineText;
+    private drawRichText;
+    private getImageRect;
+    private bindMutationObserve;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import Watermark from './core/watermark';
+import BlindWatermark from './core/blind';
+export { Watermark, BlindWatermark };

package/dist/types/index.d.ts

@@ -0,0 +1,63 @@
+export declare enum ContentTypeEnum {
+    text = "text",
+    image = "image",
+    multiLineText = "multi-line-text",
+    richText = "rich-text"
+}
+export declare enum TextAlignEnum {
+    center = "center",
+    left = "left",
+    right = "right"
+}
+export declare enum TextBaselineEnum {
+    top = "top",
+    bottom = "bottom",
+    middle = "middle"
+}
+export declare enum CreateWatermarkModeEnum {
+    default = "default",
+    blind = "blind"
+}
+export declare enum DecodeBlindWatermarkModeEnum {
+    canvas = "canvas",
+    html = "html",
+    svg = "svg"
+}
+export interface WatermarkDom extends HTMLDivElement {
+    __WATERMARK__?: string;
+    __WATERMARK__INSTANCE__?: any;
+}
+export interface WatermarkOptions {
+    width: number;
+    height: number;
+    rotate: number;
+    contentType: ContentTypeEnum;
+    content: string;
+    image?: string;
+    imageWidth: number;
+    imageHeight: number;
+    lineHeight: number;
+    zIndex: number;
+    backgroundPosition: string;
+    fontSize: number;
+    fontFamily: string;
+    textAlign: TextAlignEnum;
+    textBaseline: TextBaselineEnum;
+    fontColor: string;
+    globalAlpha: number;
+    fontWeight: string;
+    mode: CreateWatermarkModeEnum;
+    mutationObserve: boolean;
+    unique: boolean;
+    parent: Element | string;
+    onSuccess: Function;
+    onBeforeDestroy: Function;
+    onDestroyed: Function;
+}
+export interface DecodeBlindWatermarkOptions {
+    url: string;
+    fillColor: string;
+    compositeOperation: string;
+    mode: DecodeBlindWatermarkModeEnum;
+    onSuccess: Function;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,9 @@
+import { WatermarkOptions } from '../types';
+export declare const convertImage: (canvas: HTMLCanvasElement) => string;
+export declare const isFunction: (value: Function) => boolean;
+export declare const createSVGElement: (tagName: string, attrs?: {
+    [key: string]: string;
+}, namespaceURI?: string) => Element;
+export declare const getMultiLineData: (ctx: CanvasRenderingContext2D, text: string, maxWidth: number) => string[];
+export declare const createCustomContentSVG: (ctx: CanvasRenderingContext2D, options: WatermarkOptions) => Element;
+export declare const convertSVGToImage: (svg: Element) => string;

package/dist/watermark.esm.js

@@ -0,0 +1,489 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+var convertImage = function (canvas) {
+    return canvas.toDataURL('image/png', 1);
+};
+var isFunction = function (value) {
+    return typeof value === 'function';
+};
+var createSVGElement = function (tagName, attrs, namespaceURI) {
+    if (attrs === void 0) { attrs = {}; }
+    if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
+    var element = document.createElementNS(namespaceURI, tagName);
+    for (var attr in attrs) {
+        element.setAttribute(attr, attrs[attr]);
+    }
+    return element;
+};
+var getMultiLineData = function (ctx, text, maxWidth) {
+    var result = [];
+    var str = '';
+    for (var 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;
+};
+var createCustomContentSVG = function (ctx, options) {
+    var svgElement = createSVGElement('svg', {
+        xmlns: 'http://www.w3.org/2000/svg'
+    });
+    var foreignObjectElement = createSVGElement('foreignObject', {
+        width: options.width.toString(),
+        height: options.height.toString()
+    });
+    var bodyElement = document.createElement('div');
+    bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+    bodyElement.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(ctx.font, ";\n  color: ").concat(options.fontColor, ";\n  ");
+    bodyElement.innerHTML = options.content;
+    foreignObjectElement.appendChild(bodyElement);
+    svgElement.appendChild(foreignObjectElement);
+    return svgElement;
+};
+var convertSVGToImage = function (svg) {
+    var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
+    return "data:image/svg+xml;charset=utf-8,".concat(richContent);
+};
+
+var ContentTypeEnum;
+(function (ContentTypeEnum) {
+    ContentTypeEnum["text"] = "text";
+    ContentTypeEnum["image"] = "image";
+    ContentTypeEnum["multiLineText"] = "multi-line-text";
+    ContentTypeEnum["richText"] = "rich-text";
+})(ContentTypeEnum || (ContentTypeEnum = {}));
+var TextAlignEnum;
+(function (TextAlignEnum) {
+    TextAlignEnum["center"] = "center";
+    TextAlignEnum["left"] = "left";
+    TextAlignEnum["right"] = "right";
+})(TextAlignEnum || (TextAlignEnum = {}));
+var TextBaselineEnum;
+(function (TextBaselineEnum) {
+    TextBaselineEnum["top"] = "top";
+    TextBaselineEnum["bottom"] = "bottom";
+    TextBaselineEnum["middle"] = "middle";
+})(TextBaselineEnum || (TextBaselineEnum = {}));
+var CreateWatermarkModeEnum;
+(function (CreateWatermarkModeEnum) {
+    CreateWatermarkModeEnum["default"] = "default";
+    CreateWatermarkModeEnum["blind"] = "blind";
+})(CreateWatermarkModeEnum || (CreateWatermarkModeEnum = {}));
+var DecodeBlindWatermarkModeEnum;
+(function (DecodeBlindWatermarkModeEnum) {
+    DecodeBlindWatermarkModeEnum["canvas"] = "canvas";
+    DecodeBlindWatermarkModeEnum["html"] = "html";
+    DecodeBlindWatermarkModeEnum["svg"] = "svg";
+})(DecodeBlindWatermarkModeEnum || (DecodeBlindWatermarkModeEnum = {}));
+
+/**
+ * Watermark class
+ */
+var Watermark = /** @class */ (function () {
+    /**
+     * Watermark constructor
+     * @param props - watermark options
+     */
+    function Watermark(props) {
+        if (props === void 0) { props = {}; }
+        var _a;
+        this.parentElement = document.body;
+        this.options = Object.assign({
+            width: 300,
+            height: 300,
+            rotate: 45,
+            contentType: 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: TextAlignEnum.center,
+            textBaseline: TextBaselineEnum.middle,
+            fontColor: '#000',
+            globalAlpha: 0.5,
+            fontWeight: 'normal',
+            mode: CreateWatermarkModeEnum.default,
+            mutationObserve: true,
+            unique: true,
+            parent: 'body',
+            onSuccess: function () { },
+            onBeforeDestroy: function () { },
+            onDestroyed: function () { }
+        }, props);
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.rotate) {
+            this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180);
+        }
+        this.changeParentElement(this.options.parent);
+    }
+    /**
+     * Create an HD canvas.
+     * @param width - width of canvas
+     * @param height - height of canvas
+     */
+    Watermark.createCanvas = function (width, height) {
+        var _a;
+        var ratio = window.devicePixelRatio || 1;
+        var canvas = document.createElement('canvas');
+        canvas.width = width * ratio; // actual rendered pixel
+        canvas.height = height * ratio; // actual rendered pixel
+        canvas.style.width = "".concat(width, "px"); // control display size
+        canvas.style.height = "".concat(height, "px"); // control display size
+        (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.setTransform(ratio, 0, 0, ratio, 0, 0);
+        return canvas;
+    };
+    Watermark.prototype.changeParentElement = function (parent) {
+        if (typeof parent === 'string') {
+            var parentElement = document.querySelector(parent);
+            parentElement && (this.parentElement = parentElement);
+        }
+        else {
+            this.parentElement = parent;
+        }
+    };
+    /**
+     * Creating a watermark.
+     */
+    Watermark.prototype.create = function () {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function () {
+            var canvas, image, watermarkInnerDom;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        if (!this.validateUnique()) {
+                            return [2 /*return*/];
+                        }
+                        if (!this.validateContent()) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.draw()];
+                    case 1:
+                        canvas = _c.sent();
+                        image = convertImage(canvas);
+                        this.watermarkDom = document.createElement('div');
+                        watermarkInnerDom = document.createElement('div');
+                        this.watermarkDom.__WATERMARK__ = 'watermark';
+                        this.watermarkDom.__WATERMARK__INSTANCE__ = this;
+                        this.watermarkDom.style.cssText = "\n      z-index: ".concat(this.options.zIndex, ";\n      position: relative;\n    ");
+                        watermarkInnerDom.style.cssText = "\n      position: fixed;\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(image, ");\n      background-repeat: repeat;\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(watermarkInnerDom);
+                        this.parentElement.appendChild(this.watermarkDom);
+                        if (this.options.mutationObserve) {
+                            this.bindMutationObserve();
+                        }
+                        (_b = (_a = this.options).onSuccess) === null || _b === void 0 ? void 0 : _b.call(_a);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Deleting this watermark.
+     */
+    Watermark.prototype.destroy = function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        (_b = (_a = this.options).onBeforeDestroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+        (_c = this.observer) === null || _c === void 0 ? void 0 : _c.disconnect();
+        (_d = this.parentObserve) === null || _d === void 0 ? void 0 : _d.disconnect();
+        (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.remove();
+        (_g = (_f = this.options).onDestroyed) === null || _g === void 0 ? void 0 : _g.call(_f);
+    };
+    Watermark.prototype.validateUnique = function () {
+        var result = true;
+        if (this.options.unique) {
+            this.parentElement.childNodes.forEach(function (node) {
+                if (!result) {
+                    return;
+                }
+                if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
+                    result = false;
+                    // throw new Error('duplicate watermark error')
+                }
+            });
+        }
+        return result;
+    };
+    Watermark.prototype.validateContent = function () {
+        switch (this.options.contentType) {
+            case ContentTypeEnum.image:
+                return Object.hasOwnProperty.call(this.options, 'image');
+            case ContentTypeEnum.multiLineText:
+            case ContentTypeEnum.richText:
+            case ContentTypeEnum.text:
+                return this.options.content.length > 0;
+        }
+        return false;
+    };
+    Watermark.prototype.draw = function () {
+        var _this = this;
+        var canvas = Watermark.createCanvas(this.options.width, this.options.height);
+        // document.body?.appendChild(canvas)
+        var ctx = canvas.getContext('2d');
+        if (ctx === null) {
+            throw new Error('get context error');
+        }
+        ctx.font = "".concat(this.options.fontWeight, " ").concat(this.options.fontSize, "px ").concat(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(function (resolve) {
+            switch (_this.options.contentType) {
+                case ContentTypeEnum.text:
+                    _this.drawText(ctx, resolve);
+                    break;
+                case ContentTypeEnum.image:
+                    _this.drawImage(ctx, resolve);
+                    break;
+                case ContentTypeEnum.multiLineText:
+                    _this.drawMultiLineText(ctx, resolve);
+                    break;
+                case ContentTypeEnum.richText:
+                    _this.drawRichText(ctx, resolve);
+                    break;
+            }
+        });
+    };
+    Watermark.prototype.drawText = function (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);
+    };
+    Watermark.prototype.drawImage = function (ctx, resolve) {
+        var _this = this;
+        var image = new Image();
+        image.setAttribute('crossOrigin', 'Anonymous');
+        image.src = this.options.image;
+        image.onload = function () {
+            ctx.translate(_this.options.width / 2, _this.options.height / 2);
+            ctx.rotate(_this.options.rotate);
+            var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
+            ctx.drawImage(image, 0 - imageWidth / 2, 0 - imageHeight / 2, imageWidth, imageHeight);
+            resolve(ctx.canvas);
+        };
+    };
+    Watermark.prototype.drawMultiLineText = function (ctx, resolve) {
+        var _this = this;
+        // 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)
+        // }
+        var lines = getMultiLineData(ctx, this.options.content, this.options.width);
+        ctx.translate(this.options.width / 2, this.options.height / 2);
+        ctx.rotate(this.options.rotate);
+        var yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2;
+        lines.forEach(function (txt, index) {
+            ctx.fillText(txt, 0, _this.options.lineHeight * index - yOffsetValue);
+        });
+        resolve(ctx.canvas);
+    };
+    Watermark.prototype.drawRichText = function (ctx, resolve) {
+        var _this = this;
+        var image = new Image();
+        image.width = this.options.width;
+        image.height = this.options.height;
+        var element = createCustomContentSVG(ctx, this.options);
+        image.src = convertSVGToImage(element);
+        image.onload = function () {
+            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);
+        };
+    };
+    Watermark.prototype.getImageRect = function (image) {
+        var 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;
+    };
+    Watermark.prototype.bindMutationObserve = function () {
+        var _this = this;
+        if (!this.watermarkDom) {
+            return;
+        }
+        this.observer = new MutationObserver(function (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(function (mutationsList) {
+            mutationsList.forEach(function (item) {
+                var _a;
+                if ((item === null || item === void 0 ? void 0 : item.target) === _this.watermarkDom || ((_a = item === null || item === void 0 ? void 0 : item.removedNodes) === null || _a === void 0 ? void 0 : _a[0]) === _this.watermarkDom) {
+                    _this.destroy();
+                    _this.create();
+                }
+            });
+        });
+        this.parentObserve.observe(this.parentElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+            characterData: true // 节点内容或节点文本的变动。
+        });
+    };
+    return Watermark;
+}());
+
+/**
+ * BlindWatermark class
+ */
+var BlindWatermark = /** @class */ (function (_super) {
+    __extends(BlindWatermark, _super);
+    /**
+     * BlindWatermark constructor
+     * @param props - blind watermark options
+     */
+    function BlindWatermark(props) {
+        if (props === void 0) { props = {}; }
+        props.globalAlpha = 0.005;
+        props.mode = CreateWatermarkModeEnum.blind;
+        return _super.call(this, props) || this;
+    }
+    /**
+     * Decode blind watermark.
+     * @param props - decode options
+     */
+    BlindWatermark.decode = function (props) {
+        var options = Object.assign({
+            url: '',
+            fillColor: '#000',
+            compositeOperation: 'color-burn',
+            mode: DecodeBlindWatermarkModeEnum.canvas
+        }, props);
+        if (!options.url) {
+            return;
+        }
+        if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
+            var img_1 = new Image();
+            img_1.src = options.url;
+            img_1.onload = function () {
+                var _a;
+                var width = img_1.width, height = img_1.height;
+                var canvas = Watermark.createCanvas(width, height);
+                var ctx = canvas.getContext('2d');
+                if (ctx === null) {
+                    throw new Error('get context error');
+                }
+                ctx.drawImage(img_1, 0, 0, width, height);
+                ctx.globalCompositeOperation = options.compositeOperation;
+                ctx.fillStyle = options.fillColor;
+                ctx.fillRect(0, 0, width, height);
+                var resultImage = convertImage(canvas);
+                if (options.onSuccess && isFunction(options.onSuccess)) {
+                    (_a = options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options, resultImage);
+                }
+            };
+        }
+    };
+    return BlindWatermark;
+}(Watermark));
+
+export { BlindWatermark, Watermark };