From 9529acb47bb43b1bd5eb769b897adfcf5f5fb76d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BD=95=E9=81=87?= <1395294694@qq.com> Date: Wed, 1 Apr 2026 12:00:00 +0800 Subject: [PATCH] fix: record canvas by fps when blockClass is RegExp (#966) * fix: Fixed a bug where FPSObserver cannot record Canvas when blockClass is a regular expression * Update packages/rrweb/src/record/observers/canvas/canvas-manager.ts Co-authored-by: Justin Halsall --- .../src/record/observers/canvas/canvas-manager.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts index 30eb46a6..22b62358 100644 --- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts +++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts @@ -9,6 +9,7 @@ import type { listenerHandler, CanvasArg, } from '../../../types'; +import { isBlocked } from '../../../utils'; import { CanvasContext } from '../../../types'; import initCanvas2DMutationObserver from './2d'; import initCanvasContextObserver from './canvas'; @@ -137,6 +138,16 @@ export class CanvasManager { let lastSnapshotTime = 0; let rafId: number; + const getCanvas = (): HTMLCanvasElement[] => { + const matchedCanvas: HTMLCanvasElement[] = []; + win.document.querySelectorAll('canvas').forEach(canvas => { + if (!isBlocked(canvas, blockClass, true)) { + matchedCanvas.push(canvas); + } + }) + return matchedCanvas; + }; + const takeCanvasSnapshots = (timestamp: DOMHighResTimeStamp) => { if ( lastSnapshotTime && @@ -147,8 +158,7 @@ export class CanvasManager { } lastSnapshotTime = timestamp; - win.document - .querySelectorAll(`canvas:not(.${blockClass as string} *)`) + getCanvas() // eslint-disable-next-line @typescript-eslint/no-misused-promises .forEach(async (canvas: HTMLCanvasElement) => { const id = this.mirror.getId(canvas);