Convert an image into binary data in javascript

Question

Possible Duplicates:
Get image data in Javascript?
How to encode image data within an HTML file?

Is there any way to convert an image to binary data in javascript and vice versa.

score 43 · Accepted Answer · edited May 23 '17 at 12:16

43

I think Get image data in JavaScript? answers your question:

// Code taken from MatthewCrumley (https://stackoverflow.com/a/934925/298479)
function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to guess the
    // original format, but be aware the using "image/jpg" will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Pass the img tag to this function. It will return the image in base64 encoding. It will be re-encoded though. So you cannot access the original image data.

edited May 23 '17 at 12:16

Community

1
1

answered Mar 24 '11 at 14:06

ThiefMaster

310,957
84
592
636

3

Beat me to it, but this is how I did it as well. +1 – Hacknightly Mar 24 '11 at 14:07
2

I turned this into a bookmarklet here: http://jsfiddle.net/bgmort/m26yr/ You open the image you want in its own tab, then run this, and it inserts a textarea on the screen with the data url. – undefined Mar 07 '13 at 23:21
3

Instead of the "dataURL.replace" you can do "dataURL.split(',')[1]" which will also work for other formats than "png" or "jpg". :) – Benny Code Feb 04 '14 at 14:11
14

This does a base64 encoding, not straight binary as you would need for a file – Chris - Haddox Technologies Mar 04 '14 at 20:26
3

Umm.. how about a way to grab the base64 image-data without the use of canvas? Possible? – WebWanderer Jan 08 '15 at 18:35
that s base64 not binary. – Prince Hamza May 20 '22 at 14:51

Convert an image into binary data in javascript

1 Answers1

Linked

Related