From 43127104e38eb88e823bfc5f40bed20031f7069e Mon Sep 17 00:00:00 2001 From: wangfukang Date: Fri, 10 Mar 2023 18:04:14 +0800 Subject: [PATCH 1/4] fix: inline images onload --- packages/rrweb-snapshot/src/snapshot.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts index 4b88464fd3..dd0bef968a 100644 --- a/packages/rrweb-snapshot/src/snapshot.ts +++ b/packages/rrweb-snapshot/src/snapshot.ts @@ -736,6 +736,7 @@ function serializeElementNode( const oldValue = image.crossOrigin; image.crossOrigin = 'anonymous'; const recordInlineImage = () => { + image.removeEventListener('load', recordInlineImage); try { canvasService!.width = image.naturalWidth; canvasService!.height = image.naturalHeight; @@ -755,7 +756,7 @@ function serializeElementNode( }; // The image content may not have finished loading yet. if (image.complete && image.naturalWidth !== 0) recordInlineImage(); - else image.onload = recordInlineImage; + else image.addEventListener('load', recordInlineImage); } // media elements if (tagName === 'audio' || tagName === 'video') { From 577010f5dd3ded944818649da51b996e9cdd8422 Mon Sep 17 00:00:00 2001 From: wangfukang Date: Fri, 10 Mar 2023 23:44:48 +0800 Subject: [PATCH 2/4] add integration test case --- .../test/html/picture-with-inline-onload.html | 10 ++++++++++ .../rrweb-snapshot/test/integration.test.ts | 17 +++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 packages/rrweb-snapshot/test/html/picture-with-inline-onload.html diff --git a/packages/rrweb-snapshot/test/html/picture-with-inline-onload.html b/packages/rrweb-snapshot/test/html/picture-with-inline-onload.html new file mode 100644 index 0000000000..cc0fed38ef --- /dev/null +++ b/packages/rrweb-snapshot/test/html/picture-with-inline-onload.html @@ -0,0 +1,10 @@ + + + This is a robot + + diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index c937726071..93db297a8c 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -303,6 +303,23 @@ iframe.contentDocument.querySelector('center').clientHeight )) as string; 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) { From e6deddcd8aae262166340ef564cb69e1c9fa2026 Mon Sep 17 00:00:00 2001 From: wfk007 Date: Fri, 10 Mar 2023 15:46:31 +0000 Subject: [PATCH 3/4] Apply formatting changes --- packages/rrweb-snapshot/test/integration.test.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/rrweb-snapshot/test/integration.test.ts b/packages/rrweb-snapshot/test/integration.test.ts index 93db297a8c..dcc6a3ec0b 100644 --- a/packages/rrweb-snapshot/test/integration.test.ts +++ b/packages/rrweb-snapshot/test/integration.test.ts @@ -307,9 +307,12 @@ iframe.contentDocument.querySelector('center').clientHeight 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.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 }, @@ -317,7 +320,9 @@ iframe.contentDocument.querySelector('center').clientHeight inlineStylesheet: false })`); await waitForRAF(page); - const fnName = (await page.evaluate('document.querySelector("img").onload.name')) as string; + const fnName = (await page.evaluate( + 'document.querySelector("img").onload.name', + )) as string; assert(fnName === 'onload'); }); }); From bf006dec016daa437445741e284d5777832bd308 Mon Sep 17 00:00:00 2001 From: Yun Feng Date: Mon, 13 Mar 2023 13:35:19 +0800 Subject: [PATCH 4/4] Create small-olives-arrive.md --- .changeset/small-olives-arrive.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/small-olives-arrive.md diff --git a/.changeset/small-olives-arrive.md b/.changeset/small-olives-arrive.md new file mode 100644 index 0000000000..36bacbc168 --- /dev/null +++ b/.changeset/small-olives-arrive.md @@ -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