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

Add canvas image content support (#20)

Browse Source 
* Add canvas image content support

* use rr_dataURL as the key so we know its a rrweb-added attribute.

* fix canvas rr_dataURL rebuild
This commit is contained in:
吴泽康
2026-04-01 12:00:00 +08:00
committed by yz-yu
parent 5c214f42b8
commit 94d64e3424
2 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/rebuild.ts
View File

@@ -98,10 +98,13 @@ function buildNode(
node = doc.createElement(tagName);
}
for (const name in n.attributes) {
if (!n.attributes.hasOwnProperty(name)) {
continue
}
let value = n.attributes[name];
value = typeof value === 'boolean' ? '' : value;
// attribute names start with rr_ are internal attributes added by rrweb
if (n.attributes.hasOwnProperty(name) && !name.startsWith('rr_')) {
let value = n.attributes[name];
value = typeof value === 'boolean' ? '' : value;
if (!name.startsWith('rr_')) {
const isTextarea = tagName === 'textarea' && name === 'value';
const isRemoteOrDynamicCss =
tagName === 'style' && name === '_cssText';
@@ -133,12 +136,21 @@ function buildNode(
}
} else {
// handle internal attributes
if (n.attributes.rr_width) {
(node as HTMLElement).style.width = n.attributes.rr_width as string;
if (tagName === 'canvas' && name === 'rr_dataURL') {
const image = document.createElement('img')
image.src = value
image.onload = () => {
const ctx = (node as HTMLCanvasElement).getContext('2d')
if (ctx) {
ctx.drawImage(image, 0, 0, image.width, image.height)
}
}
}
if (n.attributes.rr_height) {
(node as HTMLElement).style.height = n.attributes
.rr_height as string;
if (name === 'rr_width') {
(node as HTMLElement).style.width = value;
}
if (name === 'rr_height') {
(node as HTMLElement).style.height = value;
}
}
}