Image to Base64

by codemeasandwich

HTML

<img id="userPic"/>
<span id="picSrc"/>

CSS

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

body{
    padding: 20px;
}

JavaScript

function convertImgToBase64(url, callback, outputFormat){
	var img = new Image();
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
	    var canvas = document.createElement('CANVAS');
	    var ctx = canvas.getContext('2d');
		canvas.height = this.height;
		canvas.width = this.width;
	  	ctx.drawImage(this,0,0);
	  	var dataURL = canvas.toDataURL(outputFormat || 'image/png');
	  	callback(dataURL);
	  	canvas = null; 
	};
	img.src = url;
}


    var imageUrl = "http://cdn.couchjumping.com/user/55d43df625f4272f1f8d1895/profile/1439972854.jpg";
    console.log('imageUrl', imageUrl);
    convertImgToBase64(imageUrl, function(base64Img){
     
            $('#picSrc')
                .attr('href', base64Img)
                .text(base64Img)
                .end()
            $('img')
                .attr('src', base64Img);
    });
    
    event.preventDefault();