simplyblue simplyblue - 3 months ago 34
Javascript Question

Convert an image into binary data in javascript


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.

Answer

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

// Code taken from MatthewCrumley (http://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.

To get the base64 to binary:

var myimg = new Image();

myimg.src = "http://example.com/myimage.png";

var mybinarydata = binEncode(getBase64Image(myimg));