diff --git a/src/record/observer.ts b/src/record/observer.ts
index 24a459e5..920f251c 100644
--- a/src/record/observer.ts
+++ b/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({
diff --git a/src/replay/index.ts b/src/replay/index.ts
index 6964eda8..44bc117a 100644
--- a/src/replay/index.ts
+++ b/src/replay/index.ts
@@ -749,18 +749,12 @@ export class Replayer {
         !this.imageMap.has(event)
       ) {
         count++;
-        const image = document.createElement('img');
-        image.src = event.data.args[0];
-        this.imageMap.set(event, image);
-        image.onload = () => {
-          resolved++;
-          if (resolved === count) {
-            if (beforeLoadState.matches('playing')) {
-              this.play(this.getCurrentTime());
-            }
-            unsubscribe();
-          }
-        };
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d')
+        var imgd = ctx?.createImageData(canvas.width, canvas.height)
+        var d = imgd?.data                     
+        d = JSON.parse(event.data.args[0])
+        ctx?.putImageData(imgd!, 0, 0)
       }
     }
     if (count !== resolved) {