diff --git a/guide.md b/guide.md index c09272004b..3c6ed36ff3 100644 --- a/guide.md +++ b/guide.md @@ -155,7 +155,7 @@ The parameter of `rrweb.record` accepts the following options. | packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) | | sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) | | recordCanvas | false | whether to record the canvas element | -| recordImages | false | whether to record the image content | +| inlineImages | false | whether to record the image content | | collectFonts | false | whether to collect fonts in the website | | recordLog | false | whether to record console output, refer to the [console recipe](./docs/recipes/console.md) | | userTriggeredOnInput | false | whether to add `userTriggered` on input events that indicates if this event was triggered directly by the user or not. [What is `userTriggered`?](https://github.com/rrweb-io/rrweb/pull/495) | diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index e7d1a9aefb..0798a15643 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -381,7 +381,7 @@ function serializeNode( maskInputOptions: MaskInputOptions; maskTextFn: MaskTextFn | undefined; maskInputFn: MaskInputFn | undefined; - recordImages: boolean; + inlineImages: boolean; recordCanvas: boolean; keepIframeSrcFn: KeepIframeSrcFn; }, @@ -396,7 +396,7 @@ function serializeNode( maskInputOptions = {}, maskTextFn, maskInputFn, - recordImages, + inlineImages, recordCanvas, keepIframeSrcFn, } = options; @@ -513,13 +513,17 @@ function serializeNode( attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL(); } // save image offline - if (tagName === 'img' && recordImages && canvasService && canvasCtx) { + if (tagName === 'img' && inlineImages && canvasService && canvasCtx) { const image = (n as HTMLImageElement); image.crossOrigin = 'anonymous'; - canvasService.width = image.naturalWidth; - canvasService.height = image.naturalHeight; - canvasCtx.drawImage(image, 0, 0); - attributes.rr_dataURL = canvasService.toDataURL(); + try { + canvasService.width = image.naturalWidth; + canvasService.height = image.naturalHeight; + canvasCtx.drawImage(image, 0, 0); + attributes.rr_dataURL = canvasService.toDataURL(); + } catch { + // ignore error + } } // media elements if (tagName === 'audio' || tagName === 'video') { @@ -734,7 +738,7 @@ export function serializeNodeWithId( maskInputFn: MaskInputFn | undefined; slimDOMOptions: SlimDOMOptions; keepIframeSrcFn?: KeepIframeSrcFn; - recordImages?: boolean; + inlineImages?: boolean; recordCanvas?: boolean; preserveWhiteSpace?: boolean; onSerialize?: (n: INode) => unknown; @@ -755,7 +759,7 @@ export function serializeNodeWithId( maskTextFn, maskInputFn, slimDOMOptions, - recordImages = false, + inlineImages = false, recordCanvas = false, onSerialize, onIframeLoad, @@ -773,7 +777,7 @@ export function serializeNodeWithId( maskInputOptions, maskTextFn, maskInputFn, - recordImages, + inlineImages, recordCanvas, keepIframeSrcFn, }); @@ -826,7 +830,7 @@ export function serializeNodeWithId( ) { preserveWhiteSpace = false; } - if (recordImages) { + if (inlineImages) { initCanvasService(doc); } const bypassOptions = { @@ -842,7 +846,7 @@ export function serializeNodeWithId( maskTextFn, maskInputFn, slimDOMOptions, - recordImages, + inlineImages, recordCanvas, preserveWhiteSpace, onSerialize, @@ -895,7 +899,7 @@ export function serializeNodeWithId( maskTextFn, maskInputFn, slimDOMOptions, - recordImages, + inlineImages, recordCanvas, preserveWhiteSpace, onSerialize, @@ -928,7 +932,7 @@ function snapshot( maskTextFn?: MaskTextFn; maskInputFn?: MaskTextFn; slimDOM?: boolean | SlimDOMOptions; - recordImages?: boolean; + inlineImages?: boolean; recordCanvas?: boolean; preserveWhiteSpace?: boolean; onSerialize?: (n: INode) => unknown; @@ -943,7 +947,7 @@ function snapshot( maskTextClass = 'rr-mask', maskTextSelector = null, inlineStylesheet = true, - recordImages = false, + inlineImages = false, recordCanvas = false, maskAllInputs = false, maskTextFn, @@ -1013,7 +1017,7 @@ function snapshot( maskTextFn, maskInputFn, slimDOMOptions, - recordImages, + inlineImages, recordCanvas, preserveWhiteSpace, onSerialize, diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index 139dc68976..55daa59cca 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -202,7 +202,7 @@ iframe.contentDocument.querySelector('center').clientHeight await page.waitForSelector('img', { timeout: 1000 }); const snapshot = await page.evaluate(`${code} - const [snap] = rrweb.snapshot(document, {recordImages: true, inlineStylesheet: false}); + const [snap] = rrweb.snapshot(document, {inlineImages: true, inlineStylesheet: false}); JSON.stringify(snap, null, 2); `); diff --git a/packages/rrweb-snapshot/typings/snapshot.d.ts b/packages/rrweb-snapshot/typings/snapshot.d.ts index f803e3982f..af06efc2b2 100644 --- a/packages/rrweb-snapshot/typings/snapshot.d.ts +++ b/packages/rrweb-snapshot/typings/snapshot.d.ts @@ -19,7 +19,7 @@ export declare function serializeNodeWithId(n: Node | INode, options: { maskInputFn: MaskInputFn | undefined; slimDOMOptions: SlimDOMOptions; keepIframeSrcFn?: KeepIframeSrcFn; - recordImages?: boolean; + inlineImages?: boolean; recordCanvas?: boolean; preserveWhiteSpace?: boolean; onSerialize?: (n: INode) => unknown; @@ -36,7 +36,7 @@ declare function snapshot(n: Document, options?: { maskTextFn?: MaskTextFn; maskInputFn?: MaskTextFn; slimDOM?: boolean | SlimDOMOptions; - recordImages?: boolean; + inlineImages?: boolean; recordCanvas?: boolean; preserveWhiteSpace?: boolean; onSerialize?: (n: INode) => unknown;