JSFiddle - React, Tailwind, and code Playground

HTML

<pre>
Enable CORS in browser to get base64 from URL.
Инфо - в консоли...
</pre>
<script>
//wait callback from reading function
function dataURL_from_URL(file_by_URL, onLoadCallback){
	//try to get base64
	var request = new XMLHttpRequest();
	request.open('GET', file_by_URL, true);
	request.responseType = 'blob';
	request.onload = function() {
		var reader = new FileReader();
		reader.readAsDataURL(request.response);
		reader.onload = onLoadCallback;									//event as callback
	};
	request.send();
}

function return_dataURL(str){
	if(str.indexOf('data:')!==-1){	//if dataURL
		return str;					//just return this...
	}
	str = str.trim();
	var base64_from_URL;
	dataURL_from_URL(str, function(dataURL_here) {						//запускается функция чтения
		base64_from_URL = dataURL_here.target.result;
	});
				
	setTimeout(
		function(){
			if(typeof base64_from_URL !== 'undefined'){
				console.log('base_from_URL received:', base64_from_URL, '. \n Try to return this in base64_test variable...');
				return base64_from_URL;									//try to return result
			}
		},
		500
	);
}

//TEST1: URL
var base64_test = return_dataURL("https://www.google.de/images/srpr/logo11w.png");	//google logo PNG - URL

setInterval(
	function(){
		console.log('test1: base64_test', base64_test,
			(
				(typeof base64_test === 'undefined')
					? 'AAAAAAA!!!'
					: "OK "+base64_test
			)
		);	//so long time this - "undefined"
	}
	,
	1000
)

//test2: GIF DataURL
var base64_test2 = return_dataURL("data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwAAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFzByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSpa/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJlZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uisF81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PHhhx4dbgYKAAA7");

setInterval(
	function(){
		console.log('test2: base64_test2', base64_test2);	//dataURL exist
	}
	,
	1000
);


</script>