Javascript: how to get image as bytes from a page (without redownloading)

Question

Given an existing browser page with images is there a way to get the bytes from an <img> element using Javascript?

I am not seeing any methods in HTMLImageElement which would allow getting a byte array from the image element.

I have tried the following approach but this returns an empty byte array.

var img = document.querySelector('.my_image');
var body = document.querySelector('body');
var canvas = document.createElement('canvas');
canvas.height = img.height;
canvas.width = img.width;
var context = canvas.getContext('2d');
context.drawImage(img, 0, 0);
body.appendChild(canvas);
var imageBytes = context.getImageData(img.width, img.height, 1, 1).data;
console.log(imageBytes);

D. Pardal · Answer 1 · 2020-06-22T10:10:47.737

7

Is there a way to get the bytes from an <img> element using Javascript?

Not really, but you can use fetch():

(async () {
  const arrayBuffer = await (await fetch("img-url")).arrayBuffer();
})();

This shouldn't re-download the image because it's still cached.

edited Jun 22 '20 at 10:10

answered Jun 22 '20 at 10:05

D. Pardal

6,173
1
17
37

1

Thanks, got this working with es5 js: `fetch(img.src).then(response => response.arrayBuffer()).then(buf => {console.log(buf);});` – ccpizza Jun 22 '20 at 10:31
2

This may not be possible if origin has CORS protection – Mr Klonwar Aug 18 '21 at 15:37

ccpizza · Accepted Answer · 2022-01-31T17:51:51.550

The following js code will fetch an image from an existing <img..> element as base64 without re-downloading the image (assuming there is an image with the given selector on the page and that there is no canvas cors violation, which will be the case when you click the Run button below):

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.querySelector('img');
canvas.height = img.naturalHeight;
canvas.width = img.naturalWidth;
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
var base64String = canvas.toDataURL();
console.log(base64String);

<img src="http://placekitten.com/40/40">

NOTE: Running this code directly from the snippet will fail with an error message indicating a cross-domain violation. If you copy it to your own server then you'll get the base64-encoded content (❗️must not be a file:/// URL). If you can't avoid the cross-domain issue then then you'll need to use @DPardal's solution. It also works on a third-party domain if, for example, you inject the script with something like selenium.

nick1699 · Answer 3 · 2020-06-22T10:07:15.853

I've found another contribution on StackOverflow with the same intention.

How to convert image to byte array using javascript only to store image on sql server?

This is the relevant code:

var url;
var canvas = document.createElement("canvas");
var img1=document.createElement("img"); 

function getBase64Image(){     
    url = document.getElementById("fileUpload").value;
    img1.setAttribute('src', url); 
    canvas.width = img1.width; 
    canvas.height = img1.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img1, 0, 0); 
    var dataURL = canvas.toDataURL("image/png");
    alert("from getbase64 function"+dataURL );    
    return dataURL;
}

This solution is re-downloading the image. It would make the code more readable if you renamed `p` to `url`. — ccpizza, Jun 22 '20 at 10:03

Javascript: how to get image as bytes from a page (without redownloading)

3 Answers3

Linked