JSFiddle - React, Tailwind, and code Playground

Images to Base64

by Dave

HTML

<div class='container1' contenteditable="true">
    <div class='box photo col3'> <img data-image='http://thumbs.dreamstime.com/t/boy-girl-123-numbers-23345247.jpg'/></div>
</div>

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;
	  	ctx.drawImage(img,0,0);
	  	var dataURL = canvas.toDataURL(outputFormat || 'image/png');
	  	callback.call(this, dataURL);
        // Clean up
	  	canvas = null; 
	};
	img.src = url;
}

$("[data-image]").each( function( index, element ){
    convertImgToBase64($( this ).data('image'), function(base64Img){
        $(element).attr('src', base64Img);
    });

});