watermark-js-plus 1.6.0 → 1.6.1

package/dist/es/node_modules/tslib/tslib.es6.js

@@ -0,0 +1,86 @@
+/******************************************************************************
+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, SuppressedError, Symbol, Iterator */
+
+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 __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["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 (g && (g = 0, op[0] && (_ = 0)), _) 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 };
+    }
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __assign, __awaiter, __extends, __generator };

package/dist/es/src/core/blind.js

@@ -0,0 +1,82 @@
+import { __extends, __assign, __awaiter, __generator } from '../../node_modules/tslib/tslib.es6.js';
+import { convertImage, isFunction } from '../utils/index.js';
+import { Watermark } from './watermark.js';
+import { WatermarkCanvas } from './canvas.js';
+import protection from '../utils/protection.js';
+
+/**
+ * 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 = {}; }
+        var defaultProps = {
+            globalAlpha: 0.005,
+            mode: 'blind',
+        };
+        return _super.call(this, __assign(__assign({}, props), defaultProps)) || this;
+    }
+    BlindWatermark.prototype.changeOptions = function () {
+        return __awaiter(this, arguments, void 0, function (args, mode, redraw) {
+            if (args === void 0) { args = {}; }
+            if (mode === void 0) { mode = 'overwrite'; }
+            if (redraw === void 0) { redraw = true; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        args.globalAlpha = 0.005;
+                        args.mode = 'blind';
+                        this.initConfigData(args, mode);
+                        protection(this.options.monitorProtection);
+                        if (!redraw) return [3 /*break*/, 2];
+                        this.remove();
+                        return [4 /*yield*/, this.create()];
+                    case 1:
+                        _a.sent();
+                        _a.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * Decode blind watermark.
+     * @param props - decode options
+     */
+    BlindWatermark.decode = function (props) {
+        var _a = props.url, url = _a === void 0 ? '' : _a, _b = props.fillColor, fillColor = _b === void 0 ? '#000' : _b, _c = props.compositeOperation, compositeOperation = _c === void 0 ? 'color-burn' : _c, _d = props.mode, mode = _d === void 0 ? 'canvas' : _d, _e = props.compositeTimes, compositeTimes = _e === void 0 ? 3 : _e, onSuccess = props.onSuccess;
+        if (!url) {
+            return;
+        }
+        if (mode === 'canvas') {
+            var img_1 = new Image();
+            img_1.src = url;
+            img_1.addEventListener('load', function () {
+                var width = img_1.width, height = img_1.height;
+                var canvas = WatermarkCanvas.createCanvas(width, height);
+                var ctx = canvas.getContext('2d');
+                if (!ctx) {
+                    throw new Error('get context error');
+                }
+                ctx.drawImage(img_1, 0, 0, width, height);
+                ctx.globalCompositeOperation = compositeOperation;
+                ctx.fillStyle = fillColor;
+                for (var i = 0; i < compositeTimes; i++) {
+                    ctx.fillRect(0, 0, width, height);
+                }
+                var resultImage = convertImage(canvas);
+                if (isFunction(onSuccess)) {
+                    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(resultImage);
+                }
+            });
+        }
+    };
+    return BlindWatermark;
+}(Watermark));
+
+export { BlindWatermark };

package/dist/es/src/core/canvas.js

@@ -0,0 +1,292 @@
+import { __awaiter, __generator } from '../../node_modules/tslib/tslib.es6.js';
+import { getValue, isFunction, loadImage, isUndefined, convertSVGToImage, createCustomContentSVG } from '../utils/index.js';
+import { generateRecommendOptions } from '../utils/initialization.js';
+
+var WatermarkCanvas = /** @class */ (function () {
+    function WatermarkCanvas(args, options) {
+        this.props = args;
+        this.options = options;
+        this.canvas = WatermarkCanvas.createCanvas(this.options.width, this.options.height);
+        this.recommendOptions = generateRecommendOptions(this.canvas, this.options, this.props);
+    }
+    /**
+     * Create an HD canvas.
+     * @param width - width of canvas
+     * @param height - height of canvas
+     */
+    WatermarkCanvas.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;
+    };
+    /**
+     * Clean the canvas
+     * @param canvas
+     */
+    WatermarkCanvas.clearCanvas = function (canvas) {
+        var ctx = canvas.getContext('2d');
+        if (ctx === null) {
+            throw new Error('get context error');
+        }
+        ctx.restore();
+        ctx.resetTransform();
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        var ratio = window.devicePixelRatio || 1;
+        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+    };
+    WatermarkCanvas.prototype.getCanvas = function () {
+        return this.canvas;
+    };
+    WatermarkCanvas.prototype.clear = function () {
+        WatermarkCanvas.clearCanvas(this.canvas);
+    };
+    WatermarkCanvas.prototype.draw = function () {
+        var _this = this;
+        var ctx = this.canvas.getContext('2d');
+        if (ctx === null) {
+            throw new Error('get context error');
+        }
+        if (this.options.auxiliaryLine) {
+            ctx.beginPath();
+            ctx.rect(0, 0, this.options.width, this.options.height);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = '#000';
+            ctx.stroke();
+            ctx.closePath();
+            ctx.beginPath();
+            ctx.rect(this.options.translateX, this.options.translateY, 1, 1);
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = '#f00';
+            ctx.stroke();
+            ctx.closePath();
+        }
+        this.setStyle(ctx);
+        ctx.save();
+        ctx.translate(this.options.translateX, this.options.translateY);
+        ctx.rotate(this.options.rotate);
+        return new Promise(function (resolve) {
+            switch (_this.options.contentType) {
+                case 'text':
+                    _this.drawText(ctx, resolve);
+                    break;
+                case 'image':
+                    _this.drawImage(ctx, resolve);
+                    break;
+                case 'multi-line-text':
+                    _this.drawMultiLineText(ctx, resolve);
+                    break;
+                case 'rich-text':
+                    _this.drawRichText(ctx, resolve);
+                    break;
+            }
+        });
+    };
+    WatermarkCanvas.prototype.setStyle = function (ctx) {
+        var _a;
+        var propName = 'fillStyle';
+        if (this.options.textType === 'stroke') {
+            propName = 'strokeStyle';
+        }
+        var style = this.options.fontColor;
+        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) {
+            switch (this.options.advancedStyle.type) {
+                case 'linear':
+                    style = this.createLinearGradient(ctx);
+                    break;
+                case 'radial':
+                    style = this.createRadialGradient(ctx);
+                    break;
+                case 'conic':
+                    style = this.createConicGradient(ctx);
+                    break;
+                case 'pattern':
+                    style = this.createPattern(ctx);
+                    break;
+            }
+        }
+        ctx[propName] && style && (ctx[propName] = style);
+        this.options.textAlign && (ctx.textAlign = this.options.textAlign);
+        this.options.textBaseline && (ctx.textBaseline = this.options.textBaseline);
+        ctx.globalAlpha = this.options.globalAlpha;
+        if (this.options.shadowStyle) {
+            ctx.shadowBlur = getValue(this.options.shadowStyle.shadowBlur, 0);
+            ctx.shadowColor = getValue(this.options.shadowStyle.shadowColor, '#00000000');
+            ctx.shadowOffsetX = getValue(this.options.shadowStyle.shadowOffsetX, 0);
+            ctx.shadowOffsetY = getValue(this.options.shadowStyle.shadowOffsetY, 0);
+        }
+        if (isFunction(this.options.extraDrawFunc)) {
+            this.options.extraDrawFunc(ctx);
+        }
+    };
+    WatermarkCanvas.prototype.createLinearGradient = function (ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var gradient = ctx.createLinearGradient((getValue((_c = (_b = (_a = this.options.advancedStyle) === null || _a === void 0 ? void 0 : _a.params) === null || _b === void 0 ? void 0 : _b.linear) === null || _c === void 0 ? void 0 : _c.x0, this.recommendOptions.advancedStyleParams.linear.x0)), getValue((_f = (_e = (_d = this.options.advancedStyle) === null || _d === void 0 ? void 0 : _d.params) === null || _e === void 0 ? void 0 : _e.linear) === null || _f === void 0 ? void 0 : _f.y0, 0), (getValue((_j = (_h = (_g = this.options.advancedStyle) === null || _g === void 0 ? void 0 : _g.params) === null || _h === void 0 ? void 0 : _h.linear) === null || _j === void 0 ? void 0 : _j.x1, this.recommendOptions.advancedStyleParams.linear.x1)), getValue((_m = (_l = (_k = this.options.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.linear) === null || _m === void 0 ? void 0 : _m.y1, 0));
+        (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
+            gradient.addColorStop(item.offset, item.color);
+        });
+        return gradient;
+    };
+    WatermarkCanvas.prototype.createConicGradient = function (ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var gradient = ctx.createConicGradient(getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.conic) === null || _d === void 0 ? void 0 : _d.startAngle, 0), (getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.conic) === null || _h === void 0 ? void 0 : _h.x, this.recommendOptions.advancedStyleParams.conic.x)), (getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.conic) === null || _m === void 0 ? void 0 : _m.y, this.recommendOptions.advancedStyleParams.conic.y)));
+        (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.colorStops) === null || _q === void 0 ? void 0 : _q.forEach(function (item) {
+            gradient.addColorStop(item.offset, item.color);
+        });
+        return gradient;
+    };
+    WatermarkCanvas.prototype.createRadialGradient = function (ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        var gradient = ctx.createRadialGradient((getValue((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.radial) === null || _d === void 0 ? void 0 : _d.x0, this.recommendOptions.advancedStyleParams.radial.x0)), (getValue((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.radial) === null || _h === void 0 ? void 0 : _h.y0, this.recommendOptions.advancedStyleParams.radial.y0)), (getValue((_m = (_l = (_k = (_j = this.options) === null || _j === void 0 ? void 0 : _j.advancedStyle) === null || _k === void 0 ? void 0 : _k.params) === null || _l === void 0 ? void 0 : _l.radial) === null || _m === void 0 ? void 0 : _m.r0, this.recommendOptions.advancedStyleParams.radial.r0)), (getValue((_r = (_q = (_p = (_o = this.options) === null || _o === void 0 ? void 0 : _o.advancedStyle) === null || _p === void 0 ? void 0 : _p.params) === null || _q === void 0 ? void 0 : _q.radial) === null || _r === void 0 ? void 0 : _r.x1, this.recommendOptions.advancedStyleParams.radial.x1)), (getValue((_v = (_u = (_t = (_s = this.options) === null || _s === void 0 ? void 0 : _s.advancedStyle) === null || _t === void 0 ? void 0 : _t.params) === null || _u === void 0 ? void 0 : _u.radial) === null || _v === void 0 ? void 0 : _v.y1, this.recommendOptions.advancedStyleParams.radial.y1)), (getValue((_z = (_y = (_x = (_w = this.options) === null || _w === void 0 ? void 0 : _w.advancedStyle) === null || _x === void 0 ? void 0 : _x.params) === null || _y === void 0 ? void 0 : _y.radial) === null || _z === void 0 ? void 0 : _z.r1, this.recommendOptions.advancedStyleParams.radial.r1)));
+        (_2 = (_1 = (_0 = this.options) === null || _0 === void 0 ? void 0 : _0.advancedStyle) === null || _1 === void 0 ? void 0 : _1.colorStops) === null || _2 === void 0 ? void 0 : _2.forEach(function (item) {
+            gradient.addColorStop(item.offset, item.color);
+        });
+        return gradient;
+    };
+    WatermarkCanvas.prototype.createPattern = function (ctx) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return ctx.createPattern(((_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.advancedStyle) === null || _b === void 0 ? void 0 : _b.params) === null || _c === void 0 ? void 0 : _c.pattern) === null || _d === void 0 ? void 0 : _d.image), ((_h = (_g = (_f = (_e = this.options) === null || _e === void 0 ? void 0 : _e.advancedStyle) === null || _f === void 0 ? void 0 : _f.params) === null || _g === void 0 ? void 0 : _g.pattern) === null || _h === void 0 ? void 0 : _h.repetition) || '');
+    };
+    WatermarkCanvas.prototype.setText = function (ctx, params) {
+        var methodName = 'fillText';
+        if (this.options.textType === 'stroke') {
+            methodName = 'strokeText';
+        }
+        ctx[methodName] && ctx[methodName](params.text, params.x, params.y, params.maxWidth);
+    };
+    WatermarkCanvas.prototype.drawText = function (ctx, resolve) {
+        this.setText(ctx, {
+            text: this.options.content,
+            x: 0,
+            y: 0 - this.recommendOptions.textLine.yOffsetValue,
+            maxWidth: this.options.textRowMaxWidth || this.options.width,
+        });
+        resolve(ctx.canvas);
+    };
+    WatermarkCanvas.prototype.drawImage = function (ctx, resolve) {
+        var _this = this;
+        loadImage(this.options.image).then(function (image) {
+            var _a = _this.getImageRect(image), imageWidth = _a.width, imageHeight = _a.height;
+            var imagePosition = _this.getDrawImagePosition(imageWidth, imageHeight);
+            ctx.drawImage(image, imagePosition.x, imagePosition.y, imageWidth, imageHeight);
+            resolve(ctx.canvas);
+        });
+    };
+    WatermarkCanvas.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 = this.recommendOptions.textLine.data;
+        var yOffsetValue = this.recommendOptions.textLine.yOffsetValue;
+        lines.forEach(function (text, index) {
+            _this.setText(ctx, {
+                text: text,
+                x: 0,
+                y: _this.options.lineHeight * index - yOffsetValue,
+                maxWidth: _this.options.textRowMaxWidth || _this.options.width,
+            });
+        });
+        resolve(ctx.canvas);
+    };
+    WatermarkCanvas.prototype.drawRichText = function (ctx, resolve) {
+        return __awaiter(this, void 0, void 0, function () {
+            var obj;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, createCustomContentSVG(ctx, this.options)];
+                    case 1:
+                        obj = _a.sent();
+                        loadImage(convertSVGToImage(obj.element), obj.width, obj.height).then(function (image) {
+                            var imagePosition = _this.getDrawImagePosition(image.width, image.height);
+                            ctx.drawImage(image, imagePosition.x, imagePosition.y, image.width, image.height);
+                            resolve(ctx.canvas);
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    WatermarkCanvas.prototype.getImageRect = function (image) {
+        var rect = { width: this.options.imageWidth || 0, height: this.options.imageHeight || 0 };
+        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;
+    };
+    WatermarkCanvas.prototype.getDrawImagePosition = function (imageWidth, imageHeight) {
+        var _a, _b;
+        var result = {
+            x: -imageWidth / 2,
+            y: -imageHeight / 2,
+        };
+        switch (this.options.translatePlacement) {
+            case 'top':
+                result.x = -imageWidth / 2;
+                result.y = 0;
+                break;
+            case 'top-start':
+                result.x = 0;
+                result.y = 0;
+                break;
+            case 'top-end':
+                result.x = -imageWidth;
+                result.y = 0;
+                break;
+            case 'bottom':
+                result.x = -imageWidth / 2;
+                result.y = -imageHeight;
+                break;
+            case 'bottom-start':
+                result.x = 0;
+                result.y = -imageHeight;
+                break;
+            case 'bottom-end':
+                result.x = -imageWidth;
+                result.y = -imageHeight;
+                break;
+            case 'left':
+                result.x = 0;
+                result.y = -imageHeight / 2;
+                break;
+            case 'right':
+                result.x = -imageWidth;
+                result.y = -imageHeight / 2;
+                break;
+        }
+        !isUndefined((_a = this.props) === null || _a === void 0 ? void 0 : _a.translateX) && (result.x = 0);
+        !isUndefined((_b = this.props) === null || _b === void 0 ? void 0 : _b.translateY) && (result.y = 0);
+        return result;
+    };
+    return WatermarkCanvas;
+}());
+
+export { WatermarkCanvas };

package/dist/es/src/core/image.js

@@ -0,0 +1,63 @@
+import { __awaiter, __assign, __generator } from '../../node_modules/tslib/tslib.es6.js';
+import { WatermarkCanvas } from './canvas.js';
+import { initialOptions } from '../utils/initialization.js';
+import { renderLayout } from './layout/index.js';
+import { convertImage } from '../utils/index.js';
+
+/**
+ * ImageWatermark class
+ */
+var ImageWatermark = /** @class */ (function () {
+    /**
+     * ImageWatermark constructor
+     * @param args - image watermark args
+     */
+    function ImageWatermark(args) {
+        if (args === void 0) { args = {}; }
+        var _a, _b;
+        this.drew = false;
+        this.props = args;
+        this.options = __assign(__assign({}, initialOptions), args);
+        if (this.props.crossOrigin) {
+            (_a = this.props.dom) === null || _a === void 0 ? void 0 : _a.setAttribute('crossOrigin', 'anonymous');
+        }
+        this.watermarkCanvas = new WatermarkCanvas(this.props, this.options);
+        this.originalSrc = (_b = this.props.dom) === null || _b === void 0 ? void 0 : _b.src;
+        this.backgroundImage = this.getBackgroundImage();
+    }
+    ImageWatermark.prototype.create = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, _b, _c, _d, _e;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
+                    case 0:
+                        if (this.drew) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
+                    case 1:
+                        _f.sent();
+                        this.options.layout = 'grid';
+                        this.options.gridLayoutOptions = __assign(__assign({}, this.options.gridLayoutOptions), { width: (_b = this.backgroundImage) === null || _b === void 0 ? void 0 : _b.width, height: (_c = this.backgroundImage) === null || _c === void 0 ? void 0 : _c.height, backgroundImage: this.backgroundImage });
+                        this.layoutCanvas = renderLayout(this.options, (_d = this.watermarkCanvas) === null || _d === void 0 ? void 0 : _d.getCanvas());
+                        this.options.dom.src = convertImage(this.layoutCanvas);
+                        (_e = this.watermarkCanvas) === null || _e === void 0 ? void 0 : _e.clear();
+                        this.drew = true;
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ImageWatermark.prototype.destroy = function () {
+        this.options.dom.src = this.originalSrc;
+        this.drew = false;
+    };
+    ImageWatermark.prototype.getBackgroundImage = function () {
+        if (this.options.dom) {
+            return this.options.dom;
+        }
+    };
+    return ImageWatermark;
+}());
+
+export { ImageWatermark };

package/dist/es/src/core/layout/grid.js

@@ -0,0 +1,36 @@
+import { generateMatrix } from '../../utils/index.js';
+import { WatermarkCanvas } from '../canvas.js';
+
+var GridLayout = /** @class */ (function () {
+    function GridLayout(args, partialCanvas) {
+        var _a, _b, _c, _d;
+        this.options = args;
+        this.partialWidth = this.options.width;
+        this.partialHeight = this.options.height;
+        this.rows = ((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.rows) || 1;
+        this.cols = ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.cols) || 1;
+        this.matrix = ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.matrix) || generateMatrix(this.rows, this.cols, 1);
+        this.gap = ((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.gap) || [0, 0];
+        this.partialCanvas = partialCanvas;
+    }
+    GridLayout.prototype.draw = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var layoutCanvas = WatermarkCanvas.createCanvas(((_a = this.options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.width) || this.partialWidth * this.cols + this.gap[0] * this.cols, ((_b = this.options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.height) || this.partialHeight * this.rows + this.gap[1] * this.rows);
+        var layoutContext = layoutCanvas.getContext('2d');
+        if ((_c = this.options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.backgroundImage) {
+            layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage((_d = this.options.gridLayoutOptions) === null || _d === void 0 ? void 0 : _d.backgroundImage, 0, 0, (_e = this.options.gridLayoutOptions) === null || _e === void 0 ? void 0 : _e.width, (_f = this.options.gridLayoutOptions) === null || _f === void 0 ? void 0 : _f.height);
+        }
+        for (var rowIndex = 0; rowIndex < this.rows; rowIndex++) {
+            for (var colIndex = 0; colIndex < this.cols; colIndex++) {
+                if (!((_h = (_g = this.matrix) === null || _g === void 0 ? void 0 : _g[rowIndex]) === null || _h === void 0 ? void 0 : _h[colIndex])) {
+                    continue;
+                }
+                layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext.drawImage(this.partialCanvas, this.partialWidth * colIndex + this.gap[0] * colIndex, this.partialHeight * rowIndex + this.gap[1] * rowIndex, this.partialWidth, this.partialHeight);
+            }
+        }
+        return layoutCanvas;
+    };
+    return GridLayout;
+}());
+
+export { GridLayout };

package/dist/es/src/core/layout/index.js

@@ -0,0 +1,25 @@
+import { GridLayout } from './grid.js';
+
+var renderLayout = function (options, partialCanvas) {
+    switch (options.layout) {
+        case 'grid':
+            return new GridLayout(options, partialCanvas).draw();
+        default:
+            return partialCanvas;
+    }
+};
+var generateBackgroundSize = function (options) {
+    var _a, _b, _c;
+    switch (options.layout) {
+        case 'grid': {
+            var cols = ((_a = options.gridLayoutOptions) === null || _a === void 0 ? void 0 : _a.cols) || 1;
+            var rows = ((_b = options.gridLayoutOptions) === null || _b === void 0 ? void 0 : _b.rows) || 1;
+            var gap = ((_c = options.gridLayoutOptions) === null || _c === void 0 ? void 0 : _c.gap) || [0, 0];
+            return [options.width * cols + gap[0] * cols, options.height * rows + gap[1] * rows];
+        }
+        default:
+            return [options.width, options.height];
+    }
+};
+
+export { generateBackgroundSize, renderLayout };