12

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?

joao2fast4u
  • 6,868
  • 5
  • 28
  • 42
Jackson
  • 1,426
  • 3
  • 27
  • 60

2 Answers2

10

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');
devnull69
  • 16,402
  • 8
  • 50
  • 61
  • 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" – Jackson Oct 19 '12 at 08:14
  • 1
    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 – devnull69 Oct 19 '12 at 10:02
  • Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. – CS QGB Dec 17 '19 at 12:09
  • 1
    @CSQGB please make sure that you follow the preconditions mentioned in the first sentence of my Example – devnull69 Jan 22 '20 at 12:48
4

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

OG Sean
  • 971
  • 8
  • 18
  • 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. – OG Sean Oct 22 '14 at 16:16