watermark-js-plus 1.6.4 → 1.6.6

package/dist/ie/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * watermark-js-plus v1.6.4
+ * watermark-js-plus v1.6.6
  * (c) 2022-2024 Michael Sun
  * Released under the MIT License.
  */
@@ -4277,6 +4277,187 @@
 	    };
 	}
 
+	var blindDecodeFallback;
+	var registerBlindDecodeFallback = function (fallback) {
+	    blindDecodeFallback = fallback;
+	};
+	var applyBlindDecodeComposite = function (_a) {
+	    var ctx = _a.ctx, width = _a.width, height = _a.height, fillColor = _a.fillColor, compositeOperation = _a.compositeOperation, compositeTimes = _a.compositeTimes;
+	    if (!(compositeTimes > 0)) {
+	        return;
+	    }
+	    var previousCompositeOperation = ctx.globalCompositeOperation;
+	    ctx.globalCompositeOperation = compositeOperation;
+	    if (ctx.globalCompositeOperation !== compositeOperation && blindDecodeFallback) {
+	        ctx.globalCompositeOperation = previousCompositeOperation;
+	        blindDecodeFallback({
+	            ctx: ctx,
+	            fillColor: fillColor,
+	            compositeOperation: compositeOperation,
+	            compositeTimes: compositeTimes,
+	        });
+	        return;
+	    }
+	    ctx.fillStyle = fillColor;
+	    for (var i = 0; i < compositeTimes; i++) {
+	        ctx.fillRect(0, 0, width, height);
+	    }
+	};
+
+	var MAX_CHANNEL_VALUE = 255;
+	var overlay = function (backdrop, source) {
+	    if (backdrop <= 0.5) {
+	        return 2 * backdrop * source;
+	    }
+	    return 1 - 2 * (1 - backdrop) * (1 - source);
+	};
+	var colorBurn = function (backdrop, source) {
+	    if (backdrop === 1) {
+	        return 1;
+	    }
+	    if (source === 0) {
+	        return 0;
+	    }
+	    return 1 - Math.min(1, (1 - backdrop) / source);
+	};
+	var getBlendFunction = function (compositeOperation) {
+	    switch (compositeOperation) {
+	        case 'overlay':
+	            return overlay;
+	        case 'color-burn':
+	            return colorBurn;
+	        default:
+	            throw new Error("Unsupported blind watermark composite operation: ".concat(compositeOperation));
+	    }
+	};
+	var parseNormalizedColor = function (fillStyle) {
+	    var hexColor = /^#([\da-f]{6})$/i.exec(fillStyle);
+	    if (hexColor) {
+	        return {
+	            color: [
+	                parseInt(hexColor[1].slice(0, 2), 16),
+	                parseInt(hexColor[1].slice(2, 4), 16),
+	                parseInt(hexColor[1].slice(4, 6), 16),
+	            ],
+	            alpha: 1,
+	        };
+	    }
+	    var rgbColor = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(fillStyle);
+	    if (rgbColor) {
+	        return {
+	            color: [Number(rgbColor[1]), Number(rgbColor[2]), Number(rgbColor[3])],
+	            alpha: rgbColor[4] === undefined ? 1 : Math.max(0, Math.min(1, Number(rgbColor[4]))),
+	        };
+	    }
+	    return undefined;
+	};
+	var getFillColor = function (ctx, fillColor) {
+	    var colorCanvas = (ctx.canvas.ownerDocument || document).createElement('canvas');
+	    colorCanvas.width = 1;
+	    colorCanvas.height = 1;
+	    var colorContext = colorCanvas.getContext('2d');
+	    if (!colorContext) {
+	        throw new Error('get context error');
+	    }
+	    colorContext.fillStyle = fillColor;
+	    if (typeof colorContext.fillStyle === 'string') {
+	        var parsedColor = parseNormalizedColor(colorContext.fillStyle);
+	        if (parsedColor) {
+	            return parsedColor;
+	        }
+	    }
+	    colorContext.fillRect(0, 0, 1, 1);
+	    var color = colorContext.getImageData(0, 0, 1, 1).data;
+	    return {
+	        color: [color[0], color[1], color[2]],
+	        alpha: color[3] / MAX_CHANNEL_VALUE,
+	    };
+	};
+	var isOpaque = function (data) {
+	    for (var i = 3; i < data.length; i += 4) {
+	        if (data[i] !== MAX_CHANNEL_VALUE) {
+	            return false;
+	        }
+	    }
+	    return true;
+	};
+	var applyCommonOpaqueBlend = function (data, sourceColor, compositeOperation, compositeTimes) {
+	    var isBlack = sourceColor[0] === 0 && sourceColor[1] === 0 && sourceColor[2] === 0;
+	    var isWhite = sourceColor[0] === 1 && sourceColor[1] === 1 && sourceColor[2] === 1;
+	    if (compositeOperation === 'color-burn' && (isBlack || isWhite)) {
+	        if (isBlack) {
+	            for (var offset = 0; offset < data.length; offset += 4) {
+	                for (var channel = 0; channel < 3; channel++) {
+	                    data[offset + channel] = data[offset + channel] === MAX_CHANNEL_VALUE ? MAX_CHANNEL_VALUE : 0;
+	                }
+	            }
+	        }
+	        return true;
+	    }
+	    if (compositeOperation !== 'overlay' || (!isBlack && !isWhite)) {
+	        return false;
+	    }
+	    var iterations = Math.ceil(compositeTimes);
+	    var multiplier = Math.pow(2, Math.min(iterations, 8));
+	    for (var offset = 0; offset < data.length; offset += 4) {
+	        for (var channel = 0; channel < 3; channel++) {
+	            var value = data[offset + channel];
+	            data[offset + channel] = isBlack
+	                ? Math.max(0, multiplier * value - MAX_CHANNEL_VALUE * (multiplier - 1))
+	                : Math.min(MAX_CHANNEL_VALUE, multiplier * value);
+	        }
+	    }
+	    return true;
+	};
+	var applyOpaqueBlend = function (data, sourceColor, compositeTimes, blend) {
+	    for (var i = 0; i < compositeTimes; i++) {
+	        for (var offset = 0; offset < data.length; offset += 4) {
+	            for (var channel = 0; channel < 3; channel++) {
+	                data[offset + channel] =
+	                    blend(data[offset + channel] / MAX_CHANNEL_VALUE, sourceColor[channel]) * MAX_CHANNEL_VALUE;
+	            }
+	        }
+	    }
+	};
+	var applyAlphaBlend = function (data, sourceColor, sourceAlpha, compositeTimes, blend) {
+	    for (var i = 0; i < compositeTimes; i++) {
+	        for (var offset = 0; offset < data.length; offset += 4) {
+	            var backdropAlpha = data[offset + 3] / MAX_CHANNEL_VALUE;
+	            var outputAlpha = sourceAlpha + backdropAlpha * (1 - sourceAlpha);
+	            for (var channel = 0; channel < 3; channel++) {
+	                var backdrop = data[offset + channel] / MAX_CHANNEL_VALUE;
+	                var blendedSource = (1 - backdropAlpha) * sourceColor[channel] + backdropAlpha * blend(backdrop, sourceColor[channel]);
+	                var premultipliedOutput = sourceAlpha * blendedSource + backdropAlpha * (1 - sourceAlpha) * backdrop;
+	                data[offset + channel] = outputAlpha === 0 ? 0 : (premultipliedOutput / outputAlpha) * MAX_CHANNEL_VALUE;
+	            }
+	            data[offset + 3] = outputAlpha * MAX_CHANNEL_VALUE;
+	        }
+	    }
+	};
+	var softwareBlindDecodeFallback = function (_a) {
+	    var ctx = _a.ctx, fillColor = _a.fillColor, compositeOperation = _a.compositeOperation, compositeTimes = _a.compositeTimes;
+	    var blend = getBlendFunction(compositeOperation);
+	    var _b = getFillColor(ctx, fillColor), color = _b.color, alpha = _b.alpha;
+	    if (alpha === 0 || !(compositeTimes > 0)) {
+	        return;
+	    }
+	    var imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
+	    var sourceColor = [
+	        color[0] / MAX_CHANNEL_VALUE,
+	        color[1] / MAX_CHANNEL_VALUE,
+	        color[2] / MAX_CHANNEL_VALUE,
+	    ];
+	    if (alpha === 1 && isOpaque(imageData.data)) {
+	        if (!applyCommonOpaqueBlend(imageData.data, sourceColor, compositeOperation, compositeTimes)) {
+	            applyOpaqueBlend(imageData.data, sourceColor, compositeTimes, blend);
+	        }
+	    }
+	    else {
+	        applyAlphaBlend(imageData.data, sourceColor, alpha, compositeTimes, blend);
+	    }
+	    ctx.putImageData(imageData, 0, 0);
+	};
+
 	function styleInject(css, ref) {
 	  if ( ref === void 0 ) ref = {};
 	  var insertAt = ref.insertAt;
@@ -5281,17 +5462,18 @@
 	                            return [2 /*return*/];
 	                        }
 	                        this.isCreating = true;
+	                        _h.label = 1;
+	                    case 1:
+	                        _h.trys.push([1, , 3, 4]);
 	                        if (!this.validateUnique()) {
-	                            this.isCreating = false;
 	                            return [2 /*return*/];
 	                        }
 	                        if (!this.validateContent()) {
-	                            this.isCreating = false;
 	                            return [2 /*return*/];
 	                        }
 	                        firstDraw = isUndefined(this.watermarkDom);
 	                        return [4 /*yield*/, ((_a = this.watermarkCanvas) === null || _a === void 0 ? void 0 : _a.draw())];
-	                    case 1:
+	                    case 2:
 	                        _h.sent();
 	                        this.layoutCanvas = renderLayout(this.options, (_b = this.watermarkCanvas) === null || _b === void 0 ? void 0 : _b.getCanvas());
 	                        image = convertImage(this.layoutCanvas);
@@ -5301,22 +5483,25 @@
 	                        this.watermarkDom.__WATERMARK__ = 'watermark';
 	                        this.watermarkDom.__WATERMARK__INSTANCE__ = this;
 	                        parentElementType = this.checkParentElementType();
-	                        this.watermarkDom.style.cssText = "\n      z-index:".concat(this.options.zIndex, "!important;display:block!important;visibility:visible!important;transform:none!important;scale:none!important;\n      ").concat(parentElementType === 'custom' ? 'top:0!important;bottom:0!important;left:0!important;right:0!important;height:100%!important;pointer-events:none!important;position:absolute!important;' : 'position:relative!important;', "\n    ");
+	                        this.watermarkDom.style.cssText = "\n        z-index:".concat(this.options.zIndex, "!important;display:block!important;visibility:visible!important;transform:none!important;scale:none!important;\n        ").concat(parentElementType === 'custom' ? 'top:0!important;bottom:0!important;left:0!important;right:0!important;height:100%!important;pointer-events:none!important;position:absolute!important;' : 'position:relative!important;', "\n      ");
 	                        backgroundSize = generateBackgroundSize(this.options);
-	                        watermarkInnerDom.style.cssText = "\n      display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n      position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n      z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n      background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, ";\n      ").concat(generateAnimationStyle(this.options.movable, this.options.backgroundRepeat), "\n    ");
+	                        watermarkInnerDom.style.cssText = "\n        display:block!important;visibility:visible!important;pointer-events:none;top:0;bottom:0;left:0;right:0;transform:none!important;scale:none!important;\n        position:".concat(parentElementType === 'root' ? 'fixed' : 'absolute', "!important;-webkit-print-color-adjust:exact!important;width:100%!important;height:100%!important;\n        z-index:").concat(this.options.zIndex, "!important;background-image:url(").concat(image, ")!important;background-repeat:").concat(this.options.backgroundRepeat, "!important;\n        background-size:").concat(backgroundSize[0], "px ").concat(backgroundSize[1], "px!important;background-position:").concat(this.options.backgroundPosition, ";\n        ").concat(generateAnimationStyle(this.options.movable, this.options.backgroundRepeat), "\n      ");
 	                        this.watermarkDom.appendChild(watermarkInnerDom);
 	                        this.parentElement.appendChild(this.watermarkDom);
 	                        if (this.options.mutationObserve) {
 	                            try {
-	                                this.bindMutationObserve();
+	                                this.bindMutationObserver();
 	                            }
 	                            catch (_j) {
 	                                (_e = (_d = this.options).onObserveError) === null || _e === void 0 ? void 0 : _e.call(_d);
 	                            }
 	                        }
 	                        firstDraw && ((_g = (_f = this.options).onSuccess) === null || _g === void 0 ? void 0 : _g.call(_f));
+	                        return [3 /*break*/, 4];
+	                    case 3:
 	                        this.isCreating = false;
-	                        return [2 /*return*/];
+	                        return [7 /*endfinally*/];
+	                    case 4: return [2 /*return*/];
 	                }
 	            });
 	        });
@@ -5339,7 +5524,7 @@
 	        var _a, _b, _c, _d, _e, _f, _g, _h;
 	        (_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();
+	        (_d = this.parentObserver) === null || _d === void 0 ? void 0 : _d.disconnect();
 	        (_f = (_e = this.watermarkDom) === null || _e === void 0 ? void 0 : _e.parentNode) === null || _f === void 0 ? void 0 : _f.removeChild(this.watermarkDom);
 	        (_h = (_g = this.options).onDestroyed) === null || _h === void 0 ? void 0 : _h.call(_g);
 	    };
@@ -5399,56 +5584,55 @@
 	        }
 	        return 'custom';
 	    };
-	    Watermark.prototype.bindMutationObserve = function () {
-	        var _this = this;
-	        if (!this.watermarkDom) {
-	            return;
-	        }
-	        this.observer = new MutationObserver(function (mutationsList) { return __awaiter(_this, void 0, void 0, function () {
-	            return __generator(this, function (_a) {
-	                switch (_a.label) {
+	    Watermark.prototype.recreateOnMutation = function () {
+	        return __awaiter(this, void 0, void 0, function () {
+	            var _b, _c;
+	            return __generator(this, function (_d) {
+	                switch (_d.label) {
 	                    case 0:
-	                        if (!(mutationsList.length > 0)) return [3 /*break*/, 2];
+	                        _d.trys.push([0, 2, , 3]);
 	                        this.remove();
 	                        return [4 /*yield*/, this.create()];
 	                    case 1:
-	                        _a.sent();
-	                        _a.label = 2;
-	                    case 2: return [2 /*return*/];
+	                        _d.sent();
+	                        return [3 /*break*/, 3];
+	                    case 2:
+	                        _d.sent();
+	                        (_c = (_b = this.options).onObserveError) === null || _c === void 0 ? void 0 : _c.call(_b);
+	                        return [3 /*break*/, 3];
+	                    case 3: return [2 /*return*/];
 	                }
 	            });
-	        }); });
+	        });
+	    };
+	    Watermark.prototype.bindMutationObserver = function () {
+	        var _this = this;
+	        if (!this.watermarkDom) {
+	            return;
+	        }
+	        this.observer = new MutationObserver(function (mutationsList) {
+	            if (mutationsList.length > 0) {
+	                void _this.recreateOnMutation();
+	            }
+	        });
 	        this.observer.observe(this.watermarkDom, {
 	            attributes: true, // 属性的变动
+	            attributeFilter: ['style', 'class', 'hidden', 'id'], // 仅监听会影响水印展示或标识的属性
 	            childList: true, // 子节点的变动（指新增，删除或者更改）
 	            subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
 	            characterData: true, // 节点内容或节点文本的变动。
 	        });
-	        this.parentObserve = new MutationObserver(function (mutationsList) { return __awaiter(_this, void 0, void 0, function () {
-	            var _i, mutationsList_1, item, watermarkRemoved;
-	            return __generator(this, function (_a) {
-	                switch (_a.label) {
-	                    case 0:
-	                        _i = 0, mutationsList_1 = mutationsList;
-	                        _a.label = 1;
-	                    case 1:
-	                        if (!(_i < mutationsList_1.length)) return [3 /*break*/, 4];
-	                        item = mutationsList_1[_i];
-	                        watermarkRemoved = Array.from(item.removedNodes).includes(this.watermarkDom);
-	                        if (!watermarkRemoved) return [3 /*break*/, 3];
-	                        this.remove();
-	                        return [4 /*yield*/, this.create()];
-	                    case 2:
-	                        _a.sent();
-	                        _a.label = 3;
-	                    case 3:
-	                        _i++;
-	                        return [3 /*break*/, 1];
-	                    case 4: return [2 /*return*/];
-	                }
-	            });
-	        }); });
-	        this.parentObserve.observe(this.parentElement, {
+	        this.parentObserver = new MutationObserver(function (mutationsList) {
+	            var watermarkDom = _this.watermarkDom;
+	            if (!watermarkDom) {
+	                return;
+	            }
+	            var watermarkRemoved = mutationsList.some(function (item) { return Array.from(item.removedNodes).includes(watermarkDom); });
+	            if (watermarkRemoved) {
+	                void _this.recreateOnMutation();
+	            }
+	        });
+	        this.parentObserver.observe(this.parentElement, {
 	            childList: true, // 子节点的变动（指新增，删除或者更改）
 	        });
 	    };
@@ -5515,11 +5699,14 @@
 	                    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);
-	                }
+	                applyBlindDecodeComposite({
+	                    ctx: ctx,
+	                    width: width,
+	                    height: height,
+	                    fillColor: fillColor,
+	                    compositeOperation: compositeOperation,
+	                    compositeTimes: compositeTimes,
+	                });
 	                var resultImage = convertImage(canvas);
 	                if (isFunction(onSuccess)) {
 	                    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(resultImage);
@@ -5586,6 +5773,8 @@
 	    return ImageWatermark;
 	}());
 
+	registerBlindDecodeFallback(softwareBlindDecodeFallback);
+
 	exports.BlindWatermark = BlindWatermark;
 	exports.ImageWatermark = ImageWatermark;
 	exports.Watermark = Watermark;