Image upload to base64 in HTML5

Question

I'm using jasny bootstrap to include image uploads in my page. See http://jasny.github.io/bootstrap/javascript/#fileinput

My question: I want to save this image into a Javascript database like PouchDB - so I think my only option is to use Base64 ( http://pouchdb.com/guides/attachments.html - I will be using webservices to copy this image to another website, so I think it has to be base64). But how can I convert the image to base64 string format?

Answer 1

HTML :

<input type='file' id="asd" />
<img id="img" src="" />
<div id="base"></div>

JS :

function readImage(input) {
    if ( input.files && input.files[0] ) {
        var FR= new FileReader();
        FR.onload = function(e) {
             $('#img').attr( "src", e.target.result );
             $('#base').text( e.target.result );
        };       
        FR.readAsDataURL( input.files[0] );
    }
}

$("#asd").change(function(){
    readImage( this );
});

Answer 2

You may also find blob-util to be useful. It has an imgSrcToBlob() method that takes an <img> src and converts it to an HTML5 Blob, and can also convert it to base64, binary string, ArrayBuffer, etc.