fix(module:watermark): cleanup event listeners once settled (#8862)

NG-ZORRO · Nov 12, 2024 · decd477 · decd477
1 parent 40d466d
commit decd477
Showing 1 changed file with 18 additions and 2 deletions.
diff --git a/components/water-mark/water-mark.component.ts b/components/water-mark/water-mark.component.ts
@@ -261,7 +261,10 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges, O
 
       if (this.nzImage) {
         const img = new Image();
-        img.onload = () => {
+
+        const onLoad = (): void => {
+          cleanup();
+
           ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight);
 
           /** Draw interleaved pictures after rotation */
@@ -270,7 +273,10 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges, O
           ctx.drawImage(img, alternateDrawX, alternateDrawY, drawWidth, drawHeight);
           this.appendWatermark(canvas.toDataURL(), markWidth);
         };
-        img.onerror = () =>
+
+        const onError = (): void => {
+          cleanup();
+
           this.drawText(
             canvas,
             ctx,
@@ -284,6 +290,16 @@ export class NzWaterMarkComponent implements AfterViewInit, OnInit, OnChanges, O
             alternateDrawY,
             markWidth
           );
+        };
+
+        const cleanup = (): void => {
+          img.removeEventListener('load', onLoad);
+          img.removeEventListener('error', onError);
+        };
+
+        img.addEventListener('load', onLoad);
+        img.addEventListener('error', onError);
+
         img.crossOrigin = 'anonymous';
         img.referrerPolicy = 'no-referrer';
         img.src = this.nzImage;