watermark-js-plus 1.6.4 → 1.6.6

package/dist/ie/index.esm.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.
  */
@@ -4271,6 +4271,187 @@ if (typeof CanvasRenderingContext2D !== 'undefined' && !CanvasRenderingContext2D
     };
 }
 
+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;
@@ -5275,17 +5456,18 @@ var Watermark = /** @class */ (function () {
                             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);
@@ -5295,22 +5477,25 @@ var Watermark = /** @class */ (function () {
                         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*/];
                 }
             });
         });
@@ -5333,7 +5518,7 @@ var Watermark = /** @class */ (function () {
         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);
     };
@@ -5393,56 +5578,55 @@ var Watermark = /** @class */ (function () {
         }
         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, // 子节点的变动（指新增，删除或者更改）
         });
     };
@@ -5509,11 +5693,14 @@ var BlindWatermark = /** @class */ (function (_super) {
                     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);
@@ -5580,5 +5767,7 @@ var ImageWatermark = /** @class */ (function () {
     return ImageWatermark;
 }());
 
+registerBlindDecodeFallback(softwareBlindDecodeFallback);
+
 export { BlindWatermark, ImageWatermark, Watermark };
 //# sourceMappingURL=index.esm.js.map