fix memory leak. close #1896

src/shapes/Image.ts

@@ -40,9 +40,16 @@ export interface ImageConfig extends ShapeConfig {
  * imageObj.src = '/path/to/image.jpg'
  */
 export class Image extends Shape<ImageConfig> {
+  private _loadListener: () => void;
+
   constructor(attrs: ImageConfig) {
     super(attrs);
-    this.on('imageChange.konva', () => {
+    this._loadListener = () => {
+      this._requestDraw();
+    };
+
+    this.on('imageChange.konva', (props: any) => {
+      this._removeImageLoad(props.oldVal);
       this._setImageLoad();
     });
 
@@ -59,11 +66,19 @@ export class Image extends Shape<ImageConfig> {
       return;
     }
     if (image && image['addEventListener']) {
-      image['addEventListener']('load', () => {
-        this._requestDraw();
-      });
+      image['addEventListener']('load', this._loadListener);
     }
   }
+  _removeImageLoad(image: any) {
+    if (image && image['removeEventListener']) {
+      image['removeEventListener']('load', this._loadListener);
+    }
+  }
+  destroy() {
+    this._removeImageLoad(this.image());
+    super.destroy();
+    return this;
+  }
   _useBufferCanvas() {
     const hasCornerRadius = !!this.cornerRadius();
     const hasShadow = this.hasShadow();

test/sandbox.html

@@ -17,25 +17,9 @@
         padding: 0;
         margin: 0;
       }
-
-      .test {
-        position: absolute;
-        color: red;
-        font-size: 20px;
-        font-family: Arial;
-        border: 0;
-        background-color: transparent;
-        outline: none;
-        resize: none;
-        overflow: hidden;
-        line-height: 1;
-        padding: 0px;
-        letter-spacing: 20px;
-        width: 500px;
-        text-align: center;
-      }
     </style>
     <!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
+    <script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
     <script>
       // TouchEmulator();
     </script>
@@ -52,36 +36,49 @@
     <script type="module">
       import Konva from '../src/index.ts';
 
-      var stageWidth = window.innerWidth;
-      var stageHeight = window.innerHeight;
-
-      Konva._fixTextRendering = true;
+      var width = window.innerWidth;
+      var height = window.innerHeight;
 
       var stage = new Konva.Stage({
         container: 'container',
-        width: stageWidth,
-        height: stageHeight,
+        width: width,
+        height: height,
       });
 
-      Konva._fixTextRendering = true;
-
-      const layer = new Konva.Layer();
+      var layer = new Konva.Layer();
       stage.add(layer);
 
-      const shape = new Konva.Text({
-        x: 50,
-        y: 50,
-        text: 'Hello',
-        fontSize: 20,
-        fontFamily: 'Arial',
-        letterSpacing: 20,
-        align: 'center',
-        width: 500,
-      });
-      layer.add(shape);
+      var canvas = document.createElement('canvas');
+      // use external library to parse and draw gif animation
+      function onDrawFrame(ctx, frame) {
+        // update canvas size
+        canvas.width = frame.width;
+        canvas.height = frame.height;
+        // update canvas that we are using for Konva.Image
+        ctx.drawImage(frame.buffer, 0, 0);
+        // redraw the layer
+        layer.draw();
+      }
 
-      text.style.top = shape.y() + 'px';
-      text.style.left = shape.x() + 'px';
+      gifler('https://konvajs.org/assets/yoda.gif').frames(canvas, onDrawFrame);
+
+      function testKonvaImage() {
+        setInterval(() => {
+          const image = new Konva.Image({
+            image: canvas,
+            x: Math.random() * width,
+            y: Math.random() * height,
+          });
+          layer.add(image);
+
+          setTimeout(() => {
+            image.image(canvas);
+            image.destroy();
+          }, 500);
+        }, 10);
+      }
+
+      testKonvaImage();
     </script>
   </body>
 </html>