xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve robustness of inlineImages feature (#812)

Browse Source 
* fix: add inlineImages option to rrrweb recorder and try to make the code more robust

* Improve robustness
This commit is contained in:
Yun Feng
2026-04-01 12:00:00 +08:00
committed by GitHub
parent 269b8bb216
commit 0153270680
3 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/rrweb-snapshot/src/rebuild.ts
View File

@@ -227,10 +227,13 @@ function buildNode(
}
};
} else if (tagName === 'img' && name === 'rr_dataURL') {
const image = (node as HTMLImageElement);
const image = node as HTMLImageElement;
if (!image.currentSrc.startsWith('data:')) {
// backup original img src
image.setAttribute('data-rrweb-src', image.currentSrc);
// Backup original img src. It may not have been set yet.
image.setAttribute(
'rrweb-original-src',
n.attributes['src'] as string,
);
image.src = value;
}
image.removeAttribute(name);

39
packages/rrweb-snapshot/src/snapshot.ts
View File

@@ -78,17 +78,6 @@ function extractOrigin(url: string): string {
let canvasService: HTMLCanvasElement | null;
let canvasCtx: CanvasRenderingContext2D | null;
function initCanvasService(doc: Document) {
if (!canvasService) {
canvasService = doc.createElement('canvas');
}
if (!canvasCtx) {
canvasCtx = canvasService.getContext('2d');
}
canvasService.width = 0;
canvasService.height = 0;
}
const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm;
const RELATIVE_PATH = /^(?!www\.|(?:http|ftp)s?:\/\/|[A-Za-z]:\\|\/\/|#).*/;
const DATA_URI = /^(data:)([^,]*),(.*)/i;
@@ -515,14 +504,27 @@ function serializeNode(
attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL();
}
// save image offline
if (tagName === 'img' && inlineImages && canvasService && canvasCtx) {
const image = (n as HTMLImageElement);
if (tagName === 'img' && inlineImages) {
if (!canvasService) {
canvasService = doc.createElement('canvas');
canvasCtx = canvasService.getContext('2d');
}
const image = n as HTMLImageElement;
const oldValue = image.crossOrigin;
image.crossOrigin = 'anonymous';
try {
canvasService.width = image.naturalWidth;
canvasService.height = image.naturalHeight;
canvasCtx.drawImage(image, 0, 0);
attributes.rr_dataURL = canvasService.toDataURL();
const recordInlineImage = () => {
canvasService!.width = image.naturalWidth;
canvasService!.height = image.naturalHeight;
canvasCtx!.drawImage(image, 0, 0);
attributes.rr_dataURL = canvasService!.toDataURL();
oldValue
? (attributes.crossOrigin = oldValue)
: delete attributes.crossOrigin;
};
// The image content may not have finished loading yet.
if (image.complete && image.naturalWidth !== 0) recordInlineImage();
else image.onload = recordInlineImage;
} catch {
// ignore error
}
@@ -832,9 +834,6 @@ export function serializeNodeWithId(
) {
preserveWhiteSpace = false;
}
if (inlineImages) {
initCanvasService(doc);
}
const bypassOptions = {
doc,
map,