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
2022-01-25 12:56:57 +11:00
committed by GitHub
parent ca5ecba4eb
commit 0c27ad22b2
3 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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,