How to get image bytes string (base64) in html5, jquery, javascript?

Question

I have an image in iPhone or Android and I want to pass that file stream or bytes string through jQuery AJAX to Web Service to store file on server.

So, in HTML5 how

Answer 1

You could copy the image to a canvas with the same size using canvas.drawImage(image, 0, 0) and then use the .toDataURL('image/TYPE') method of the canvas to retrieve the base64 representation of the image. 'TYPE' would then be either jpg, gif or png

Example: Make sure that the current page and the image are both on the same domain, subdomain and protocol otherwise you will get a security error. Also make sure that the canvas has the same width and height as the image

HTML

<img src="whatever.jpg" id="myimage" />
<canvas width="300" height="300" id="mycanvas" style="display: none;"></canvas>

Javascript

var myImage = document.getElementById('myimage');
var myCanvas = document.getElementById('mycanvas');

var ctx = myCanvas.getContext('2d');

ctx.drawImage(myImage, 0, 0);

var mydataURL=myCanvas.toDataURL('image/jpg');

Answer 2

To add to the code example to isolate the raw data without the format in the beginning of the string...

Javascript:

var myImage = document.getElementById('myimage');
var myCanvas = document.getElementById('mycanvas');
var ctx = myCanvas.getContext('2d');
    ctx.drawImage(myImage, 0, 0);

var myDataURL = myCanvas.toDataURL('image/png');// could also be 'image/jpg' format

/* to remove the 'data:image/jpg;base64,' later from using the toDataURL() function (or PNG version data:image/png;base64,') and have only the raw base4 data string, split the result string from the ctx.drawImage() function at the comma and take the second half, and the remaining data will be in tact like so: */

var myBase64Data = myDataURL.split(',')[1];// removes everything up to and including first comma

personally I like this and find it to be much cleaner & faster that using something like indexOf and substring