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 ??

Ram · Accepted Answer · 2011-05-12 14:44:29Z

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, 2011 at 14:44

Ram

911 gold badge1 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Over a year ago

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.

mattsven · Accepted Answer · 2011-05-12 14:17:50Z

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.

Collectives™ on Stack Overflow

Convert Image to Binary Data or String in Javascript

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related