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

fix: inline images onload (#1174)

Browse Source 
* fix: inline images onload

* add integration test case

* Apply formatting changes

* Create small-olives-arrive.md

---------

Co-authored-by: Yun Feng <yun.feng0817@gmail.com>
This commit is contained in:
fukang wang
2026-04-01 12:00:00 +08:00
committed by GitHub
parent d4d840122a
commit 6855705445
4 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/small-olives-arrive.md Normal file
View File

@@ -0,0 +1,5 @@
---
'rrweb-snapshot': patch
---
Fix: [#1172](https://github.com/rrweb-io/rrweb/issues/1172) don't replace original onload function of Images

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

@@ -736,6 +736,7 @@ function serializeElementNode(
const oldValue = image.crossOrigin; const oldValue = image.crossOrigin;
image.crossOrigin = 'anonymous'; image.crossOrigin = 'anonymous';
const recordInlineImage = () => { const recordInlineImage = () => {
image.removeEventListener('load', recordInlineImage);
try { try {
canvasService!.width = image.naturalWidth; canvasService!.width = image.naturalWidth;
canvasService!.height = image.naturalHeight; canvasService!.height = image.naturalHeight;
@@ -755,7 +756,7 @@ function serializeElementNode(
}; };
// The image content may not have finished loading yet. // The image content may not have finished loading yet.
if (image.complete && image.naturalWidth !== 0) recordInlineImage(); if (image.complete && image.naturalWidth !== 0) recordInlineImage();
else image.onload = recordInlineImage; else image.addEventListener('load', recordInlineImage);
} }
// media elements // media elements
if (tagName === 'audio' || tagName === 'video') { if (tagName === 'audio' || tagName === 'video') {

10
packages/rrweb-snapshot/test/html/picture-with-inline-onload.html Normal file
View File

@@ -0,0 +1,10 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img
src="/images/robot.png"
alt="This is a robot"
style="opacity: 0;"
onload="this.style.opacity=1"
/>
</body>
</html>

22
packages/rrweb-snapshot/test/integration.test.ts
View File

@@ -303,6 +303,28 @@ iframe.contentDocument.querySelector('center').clientHeight
)) as string; )) as string;
assert(snapshot.includes('-webkit-background-clip: text;')); assert(snapshot.includes('-webkit-background-clip: text;'));
}); });
it('images with inline onload should work', async () => {
const page: puppeteer.Page = await browser.newPage();
await page.goto(
'http://localhost:3030/html/picture-with-inline-onload.html',
{
waitUntil: 'load',
},
);
await page.waitForSelector('img', { timeout: 1000 });
await page.evaluate(`${code}var snapshot = rrweb.snapshot(document, {
dataURLOptions: { type: "image/webp", quality: 0.8 },
inlineImages: true,
inlineStylesheet: false
})`);
await waitForRAF(page);
const fnName = (await page.evaluate(
'document.querySelector("img").onload.name',
)) as string;
assert(fnName === 'onload');
});
}); });
describe('iframe integration tests', function (this: ISuite) { describe('iframe integration tests', function (this: ISuite) {