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 can I get image file (jpg, gif, etc..) bytes string so I can post that to server?
2 Answers
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');
4 Comments
Jackson
I have to post this image bytes in AJAX on DOT NET Web Service API. How to do this?? i tried but it giving same error "The input is not a valid Base-64 string as it contains a non-base 64 character"
devnull69
You would have to cut off the first part of the string (which is a data URL rather than a mere base64 representation). It looks like
data:image/jpg;base64,BASE64DATAHERE. If you cut off everthing up to the first comma, you should be fine
CS QGB
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
devnull69
@CSQGB please make sure that you follow the preconditions mentioned in the first sentence of my Example
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
1 Comment
OG Sean
This is an example of how to fix the error "The input is not a valid Base-64 string as it contains a non-base 64 character" when handling the data with the data URL portion still on the front. The raw data is still in compressed JPG or PNG format.
prop()and send it using$.ajax()