How to get a user uploaded image cenverted to Base64

Question

I have already made a simple log system where i get the Base64 Code from a text string:

var myString = 'Hello everyone, my name is Dennis';
var b64 = btoa(myString);
var unicode = atob(b64);
console.log(b64);
console.log(unicode);

The output is a Base64 Code like i said, but what i am trying to is to convert an uploaded image to Base64. Here is what i got so far, the output what i get from this is the whole webpage in base64 code. i hope someone could help me out.

function toDataUrl(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.send();
}



//use

var captcha = document.getElementById('logo').src;
toDataUrl(captcha, function(base64Img) {
    log(captcha);
});

Thanks in advance!

Possible duplicate of [How to convert image into base64 string using javascript](http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript) — Dipiks, Jan 10 '17 at 08:27
@GilleQ. i've already seen that post but i can't figure it out, thanks for the help tho.. — Dennis Offinga, Jan 10 '17 at 08:38
Is the image hosted on the same domain? Consider CORS when working with XHR — Adam Azad, Jan 10 '17 at 08:50
@AdamAzad currently i am just working on LocalHost, so no Domain yet — Dennis Offinga, Jan 10 '17 at 08:53

score 2 · Accepted Answer · answered Jan 10 '17 at 08:52

There I made you a working example if the duplicate doens't help you: (And be aware of CORS if your image is not heberged on the same domain of the request)

function toDataUrl(src, callback) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.height;
    canvas.width = this.width;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL();
    callback(dataURL);
  };
  img.src = src;

}

toDataUrl("http://i.imgur.com/rx3kylA.png", function(base64Img) {
  console.log(base64Img);
});

How to get a user uploaded image cenverted to Base64

1 Answers1