From decd4772bdbfeb1a1397c2b597882503ca5685ad Mon Sep 17 00:00:00 2001
From: Artur <arthurandrosovich@gmail.com>
Date: Tue, 12 Nov 2024 23:38:41 +0000
Subject: [PATCH] fix(module:watermark): cleanup event listeners once settled
 (#8862)

---
 components/water-mark/water-mark.component.ts | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/components/water-mark/water-mark.component.ts b/components/water-mark/water-mark.component.ts
index 4553495efb5..bf3521d8694 100644
--- 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;