feat(replay): Add option to skip requestAnimationFrame for canvas snapshots

This adds an option to `snapshot()` to skip `requestAnimationFrame` when manually snapshotting.

Author: billyvg

packages/replay-canvas/src/canvas.ts

@@ -3,8 +3,12 @@ import { defineIntegration } from '@sentry/core';
 import type { CanvasManagerInterface, CanvasManagerOptions } from '@sentry-internal/replay';
 import { CanvasManager } from '@sentry-internal/rrweb';
 
+interface SnapshotOptions {
+  skipRequestAnimationFrame?: boolean;
+}
+
 interface ReplayCanvasIntegration extends Integration {
-  snapshot: (canvasElement?: HTMLCanvasElement) => Promise<void>;
+  snapshot: (canvasElement?: HTMLCanvasElement, options?: SnapshotOptions) => Promise<void>;
 }
 
 interface ReplayCanvasOptions {
@@ -106,9 +110,29 @@ export const _replayCanvasIntegration = ((options: Partial<ReplayCanvasOptions>
         ...(CANVAS_QUALITY[quality || 'medium'] || CANVAS_QUALITY.medium),
       };
     },
-    async snapshot(canvasElement?: HTMLCanvasElement) {
+    async snapshot(canvasElement?: HTMLCanvasElement, options?: SnapshotOptions) {
       const canvasManager = await _canvasManager;
-      canvasManager.snapshot(canvasElement);
+
+      canvasManager.snapshot(canvasElement, options);
+      // createImageBitmap(canvasElement).then(async imageBitmap => {
+      //   // debug
+      //   const canvas = document.getElementById('test');
+      //   canvas.height = imageBitmap.height;
+      //   canvas.width = imageBitmap.width;
+      //   // temp1.getContext("2d").drawImage(bitmap, 0, 0);
+      //   // const canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
+      //   const ctx = canvas.getContext('2d');
+      //
+      //   // Draw the ImageBitmap onto the canvas
+      //   ctx.drawImage(imageBitmap, 0, 0);
+      //
+      //   // Convert the canvas content to a data URL (Base64 encoded PNG by default)
+      //   const dataURL = await canvas.toDataURL('image/webp'); // Specify format if needed
+      //
+      //   console.log(dataURL);
+      //   canvasManager.snapshotBitmap(canvasElement, imageBitmap);
+      //   imageBitmap.close();
+      // });
     },
   };
 }) satisfies IntegrationFn<ReplayCanvasIntegration>;