How to convert image into base64 string using javascript

There are two approaches you can choose from:

1. Approach: FileReader

Load the image as blob via XMLHttpRequest and use the FileReader API to convert it to a data URL.

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();
}

This code example could also be implemented using the fetch api (example).

This approach:

• lacks in browser support
• has better compression
• works for other file types as well

Usage:

toDataUrl('http://example/url', function(base64Img) {
  console.log(base64Img);
});

Browser Support:

• http://caniuse.com/#feat=filereader

2. Approach: Canvas

Load the image into an Image-Object, paint it to a non tainted canvas and convert the canvas back to a dataURL.

function toDataUrl(src, callback, outputFormat) {
  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(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

in detail

Usage:

toDataUrl('http://example/url', function(base64Img) {
  console.log(base64Img);
});

Supported input formats:

image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx

Supported output formats:

image/png, image/jpeg, image/webp(chrome)

Browser Support:

• http://caniuse.com/#feat=canvas

• IE10 (IE10 just works with same origin images)

Demo:

• http://jsfiddle.net/handtrix/YvQ5y/

Images from the local file system

If you want to convert images from the users file system you need to take a different approach. Use the FileReader API (Check out this fiddle).

This snippet could convert your string,image and even video file to base64 string data. Try it once...

<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; // <--- data: base64

        var newImage = document.createElement('img');
        newImage.src = srcData;

        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
        console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
      }
      fileReader.readAsDataURL(fileToLoad);
    }
  }
</script>

Here is what i did

//Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

And here is how you use it

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})

As far as i know image can be converted into base64 string either by FileReader() or storing it in canvas element and then use toDataURL() to get image.I had the simmilar kind of problem you can refer this.

Convert an image to canvas that is already loaded

You could use FileAPI, but it's pretty much unsupported.

Well, if you are using dojo, it gives us direct way to encode or decode into base64.

Try this:

To encode an array of bytes using dojox.encoding.base64:

var str = dojox.encoding.base64.encode(myByteArray);

To decode a base64-encoded string:

var bytes = dojox.encoding.base64.decode(str);