Image to Base64

Image to Base64

HTML

<h2>Input</h2>  
<form class="input-group" id="img2b64">
    <input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
</form>
            
<hr>
    
<h2>Output</h2>        
<div class="output">
    <textarea class="form-control"></textarea><br>
    <a></a><br><br>
    <img><br>
</div>

CSS

@import url('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');

body{
    padding: 20px;
}

JavaScript

function encodeImageFileAsURL(cb) {
    return function(){
        var file = this.files[0];
        var reader  = new FileReader();
        reader.onloadend = function () {
            cb(reader.result);
        }
        reader.readAsDataURL(file);
       
    }
}

$('#inputFileToLoad').change(encodeImageFileAsURL(function(base64Img){
    $('.output')
      .find('textarea')
        .val(base64Img)
        .end()
      .find('a')
        .attr('href', base64Img)
        .text(base64Img)
        .end()
      .find('img')
        .attr('src', base64Img);
}));
/*

http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
http://jsfiddle.net/handtrix/xztfbx1m/
https://developer.mozilla.org/en/docs/Web/API/FileReader

*/