How to extract programmatically an image buffer from already loaded page?

Question

Suppose we have a loaded page with images. How can I save an image without separate downloading from the same url?

I found examples with intercept network requests only.

But the image already exists as array of bites. Is there possibility to get this buffer?

I can see it in chrome devtools: Application Tab -> Frames -> Image.

Answer 1

You can use canvas element to draw the loaded image. The canvas has method to convert image to a URL that represents the image data.

In order to download, you can create a new link element with that exactly URL and click() it to download, programmatically.

Here's a working demo: https://jsfiddle.net/itgoldman/fhpt9gea/

function save_image(image) {
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = 'canvas-image.png';
  link.href = dataURL;
  link.click();
}

.d-flex {
  display: flex;
  gap: 20px;
}

<div class="d-flex">
  <img id="myImage" src="https://picsum.photos/150" crossOrigin="anonymous">
  <button onclick="save_image(document.getElementById('myImage')); ">save</button>
  <canvas id="myCanvas" width="150" height="150"></canvas>
</div>