JSFiddle - React, Tailwind, and code Playground

by Vaibhav Mehta

HTML

<img src="http://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png" id="test" alt="">

JavaScript

function convertImgToBase64(url, callback, outputFormat){
	var canvas = document.createElement('canvas');
	var ctx = canvas.getContext('2d');
	var img = new Image;
	img.crossOrigin = 'Anonymous';
	img.onload = function(){
		canvas.height = img.height;
		canvas.width = img.width;
 
        var context = canvas.getContext("2d");
        ctx.translate(img.width/2, img.height/2);
        ctx.rotate(-Math.PI / 2);
        ctx.drawImage(img, -img.width / 2, -img.height / 2); 
        ctx.rotate(Math.PI / 2);
        ctx.translate(-img.width / 2, -img.height / 2);
        
	  	var dataURL = canvas.toDataURL(outputFormat || 'image/png');
	  	callback.call(this, dataURL);
        // Clean up
	  	canvas = null; 
	};
	img.src = url;
}

convertImgToBase64(document.getElementById('test').src, function(base64Img){
     console.log(base64Img);
});