Update canvas recording mechanism (#536)

src/record/observer.ts

@@ -533,7 +533,11 @@ function initCanvasMutationObserver(
                     recordArgs[0] &&
                     recordArgs[0] instanceof HTMLCanvasElement
                   ) {
-                    recordArgs[0] = recordArgs[0].toDataURL();
+                    const canvas = recordArgs[0]
+                    const ctx = canvas.getContext('2d')
+                    let imgd = ctx?.getImageData(0, 0, canvas.width, canvas.height)
+                    let pix = imgd?.data;
+                    recordArgs[0] = JSON.stringify(pix)
                   }
                 }
                 cb({

src/replay/index.ts

@@ -749,18 +749,12 @@ export class Replayer {
         !this.imageMap.has(event)
       ) {
         count++;
-        const image = document.createElement('img');
+        var canvas = document.createElement('canvas');
-        image.src = event.data.args[0];
+        var ctx = canvas.getContext('2d')
-        this.imageMap.set(event, image);
+        var imgd = ctx?.createImageData(canvas.width, canvas.height)
-        image.onload = () => {
+        var d = imgd?.data                     
-          resolved++;
+        d = JSON.parse(event.data.args[0])
-          if (resolved === count) {
+        ctx?.putImageData(imgd!, 0, 0)
-            if (beforeLoadState.matches('playing')) {
-              this.play(this.getCurrentTime());
-            }
-            unsubscribe();
-          }
-        };
       }
     }
     if (count !== resolved) {