imgurl to base64

paste image url or image to get base64 value.

by Laurens Maneschijn

HTML

<form>
	<label>
		image url:<br>
		<input id="inputurl">
	</label>
	<label>
		output base64:<br>
		<input id="output" readonly>
	</label>
</form>

img using image url as src:<br>
<img id="imgurl"><br>
img using base64 as src:<br>
<img id="imgbase64"><br>

<hr>
<p>
	You can also paste image data in here.
	First copy an image somewhere, then click anywhere here and hit ctrl-v.
</p>
<p>
	N.B. image url does not work for local files (urls like `file://`).<br>
</p>

CSS

label {
	display: block;
}
input {
	width: 90%;
}

JavaScript

// source: https://stackoverflow.com/a/43015238/1158769

function toDataUrl(url, callback) {
	var xhr = new XMLHttpRequest();
	xhr.onload = function() {
		var reader = new FileReader();
		reader.onloadend = function() {
			callback(reader.result);
		}
		reader.readAsDataURL(xhr.response);
	};
	xhr.open('GET', url);
	xhr.responseType = 'blob';
	xhr.send();
}
function update() {
	var url = $('#inputurl').val();
	$('#output').val('');
	$('#imgurl').attr('src', url);
	$('#imgbase64').attr('src', '');
	toDataUrl(url, function(myBase64) {
		console.log(myBase64); // myBase64 is the base64 string
		$('#output').val(myBase64);
		$('#imgbase64').attr('src', myBase64);
	}); 
}

$(document).on('change', '#inputurl', update);
$(document).on('keyup', '#inputurl', update);

window.addEventListener("paste", function(pasteEvent){
	getImageDataURLFromPasteEvent(pasteEvent, function(imagedataurl, item, blob, filereader) {
//		console.log([imagedataurl, item, blob, filereader]);
		$('#inputurl').val(imagedataurl);
		$('#output').val(imagedataurl);
		$('#imgurl').attr('src', imagedataurl);
		$('#imgbase64').attr('src', imagedataurl);
	});
}, false);


//////////
// copy paste image code
//////////

//	https://stackoverflow.com/questions/24214962/whats-the-proper-way-to-document-callbacks-with-jsdoc
//	@param {function(string):void} callback

	/**
	 * @param {Event} pasteEvent
	 * @param {function} callback
	 * @return void
	 */
	function getImageDataURLFromPasteEvent(pasteEvent, callback) {
		// https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent
		if (typeof(callback) !== "function") {
			return;
		}
		if (pasteEvent && pasteEvent.originalEvent) {
			// support for passing (jquery) wrapped event:
			pasteEvent = pasteEvent.originalEvent;
		}
		if (!pasteEvent || !pasteEvent.clipboardData || !pasteEvent.clipboardData.items) {
//			callback(undefined);
			return;
		}
		var i, item, blob, filereader, items = pasteEvent.clipboardData.items;
		for (i in items) {
			item =...