Convert Image to Binary Data or String in Javascript

Question

I am working on uploading image file to TWITPIC using XMLHttp Request on a Chrome Extension . I need to send the image as payload. Is there a way to do this ? I found this link Convert an image into binary data in javascript But that works on image tags. i need a way to specify image file path and upload image to TWITPIC.

I came to know about FileReader API with HTML 5. Is there any way to work using that??. It should work on a local file.

Does Chrome Extension support FileReader API without running a localhost server ??

score 3 · Answer 1 · answered May 12 '11 at 14:44

3

I found the answer myself. Chrome Extensions does support FileReader API of HTML 5. So just the code below works simple.

  var reader = new FileReader();
  reader.readAsDataURL(f);

answered May 12 '11 at 14:44

Ram

91
1
1
6

3

This base64 encodes the file, which isn't binary and inflates the size of the file about ~33%, which might not be an issue but worth considering. `readAsBinaryString(f)` will return the file as binary data, but doesn't appear to be compatible with IE10. – Josh May 16 '13 at 20:09

score -1 · Answer 2 · answered May 12 '11 at 14:17

You can use this to get the binary data of an image using XMLHTTPRequests, I used it recently for a similar purpose:

var dataToBinary = function(data){
    var data_string = "";
    for(var i=0; i<data.length; i++){
        data_string += String.fromCharCode(data[i].charCodeAt(0) & 0xff);
    }
    return data_string;
};

$.ajax("http://some.site.com/myImage.jpg", {
    success: function(data){
        binary = dataToBinary(data);
        //or: 'binary = data', dataToBinary might not be needed
    },
    mimeType: "text/plain; charset=x-user-defined"
});

And the binary data is stored in the binary variable.

Convert Image to Binary Data or String in Javascript

2 Answers2

Linked