Snapshot images as base64

Hi!

First of all awesome project, thanks for making it public!

I have a question regarding saving images offline as base64, but also keeping the original URL link. Right now an image is stored something like:

{'type': 2,
 'tagName': 'img',
 'attributes': {'id': 'mainImage', 'src': 'https://whatever.com/something.gif'},
 'childNodes': [],
 'id': 29},

Ideally the image content would be stored somewhere in there like: src="data:image/gif;base64,deadbeef ...

There’s an option to save the canvas like that.

Is it possible for the images as well?

[champkeh]

Oh, I see what you mean，you can create a global canvas element as a render service, then in serializeNode function add follow code:

const canvasService: HTMLCanvasElement = document.createElement('canvas');
const canvasCtx: CanvasRenderingContext2D | null = canvasService.getContext('2d');

function serializeNode(n, options) {

  // ...

  // convert image to base64
  if (tagName === 'img' && canvasCtx) {
    canvasService.width = (n as HTMLImageElement).naturalWidth;
    canvasService.height = (n as HTMLImageElement).naturalHeight;
    canvasCtx.drawImage((n as HTMLImageElement), 0, 0);
    attributes.rr_dataURL = canvasService.toDataURL();
  }

  // ...
}

and i test that in local environment, result is follow, it seems feasible:

[champkeh]

This could be cause result storage very big. My current method is to store images separately in Minio based on their content hash at project build time, then in the playback phase, dynamically proxy the address of the image to Minio’s url.