Save images offline, in the snapshot #770
Conversation
| const image = (node as HTMLImageElement); | ||
| if (!image.currentSrc.startsWith('data:')) { | ||
| // backup original img src | ||
| image.setAttribute('data-src', image.currentSrc); |
There was a problem hiding this comment.
Here I used the data-src attribute for keeping the original URL.
Maybe we can use something else, less likely to conflict, maybe data-rr-src ? or data-rrweb-src ?
What do you think?
There was a problem hiding this comment.
OK I just went ahead and renamed this to data-rrweb-src.
guide.md
Outdated
| @@ -155,6 +155,7 @@ The parameter of `rrweb.record` accepts the following options. | |||
| | packFn | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) | | |||
| | sampling | - | refer to the [storage optimization recipe](./docs/recipes/optimize-storage.md) | | |||
| | recordCanvas | false | whether to record the canvas element | | |||
| | recordImages | false | whether to record the image content | | |||
There was a problem hiding this comment.
maybe inlineImages or something more concrete?
| @@ -496,6 +512,15 @@ function serializeNode( | |||
| if (tagName === 'canvas' && recordCanvas) { | |||
| attributes.rr_dataURL = (n as HTMLCanvasElement).toDataURL(); | |||
| } | |||
| // save image offline | |||
| if (tagName === 'img' && recordImages && canvasService && canvasCtx) { | |||
There was a problem hiding this comment.
To avoid some corner cases in the browser, especially some security options with cross-origin domains, how about adding a try-catch to this block? So even though corner cases happen, it will not block the recording.
There was a problem hiding this comment.
Not sure if I understood where you want the try catch, I added it a little below.
See cec7fda#diff-6434d77e679a3d1e4217dcad03ee6f02551e41dc0b077a06a45020e68e1b4ee3R519-R526
| canvasCtx.drawImage(image, 0, 0); | ||
| attributes.rr_dataURL = canvasService.toDataURL(); | ||
| } catch { | ||
| // ignore error |
There was a problem hiding this comment.
shall we log something here, e.g. with console.warn?
There was a problem hiding this comment.
Since this happened on the record side, at least we need an option to do a log.
And this is out of the scope of this PR, feel free to open a new one! Thanks.
|
Sorry for the late, let's go! |
Hi guys,
I made this feature that I already discussed here: #737
It's about saving images inside the snapshot as base64, just like we have for canvas already.
I tried to use the same code style and not change things too much.
I added a test, but I'm not sure if it's in the right place. In the integration, it seemed the best place, because you're using Puppeteer and we need to simulate a canvas to make it work.
Please let me know if you think something is wrong, or you want more tests, or I'm missing something.