add snapshot function to replay canvas

Author: c298lee

packages/replay/src/canvas.ts

@@ -1,4 +1,4 @@
-import { getCanvasManager } from '@sentry-internal/rrweb';
+import { createCanvasManager } from '@sentry-internal/rrweb';
 import type { Integration } from '@sentry/types';
 import type { CanvasManagerInterface, GetCanvasManagerOptions, ReplayConfiguration } from './types';
 
@@ -19,13 +19,16 @@ export class ReplayCanvas implements Integration {
    */
   public name: string;
 
+  public canvasManager: (options: GetCanvasManagerOptions) => CanvasManagerInterface;
+
   private _canvasOptions: ReplayCanvasOptions;
 
   public constructor(options?: Partial<ReplayCanvasOptions>) {
     this.name = ReplayCanvas.id;
     // TODO FN: Allow to configure this
     // But since we haven't finalized how to configure this, this is predefined for now
     // to avoid breaking changes
+    this.canvasManager = createCanvasManager;
     this._canvasOptions = {
       quality: (options && options.quality) || 'medium',
       manualSnapshot: true,
@@ -46,14 +49,25 @@ export class ReplayCanvas implements Integration {
       _experiments: {
         canvas: {
           ...this._canvasOptions,
-          manager: opts =>
-            this.canvasManager({
-              ...opts,
-              manualSnapshot: this._canvasOptions.manualSnapshot,
-            }),
+          manager: createCanvasManager,
           quality: this._canvasOptions.quality,
         },
       },
     };
   }
+
+  /**
+   * Take manual snapshot of canvas
+   */
+  public snapshotCanvas(canvasElement?: HTMLCanvasElement): void {
+    const canvasManager: CanvasManagerInterface = createCanvasManager(this.canvasManager, {
+      recordCanvas: true,
+      blockClass: '',
+      blockSelector: null,
+      unblockSelector: null,
+      dataURLOptions: this._canvasOptions.quality,
+    });
+
+    return canvasManager.snapshot(this._canvasOptions, canvasElement);
+  }
 }