imageFromDataUrl.js (src, callback) and blobFromDataUrl.js (dataUrl)

imageFromDataUrl.js

/////// imageFromDataUrl.js (src, callback) and blobFromDataUrl.js (dataUrl)

// const imageFromDataUrl=(a,b)=>Object.assign(document.createElement("img"),{src:a,onload:b||function(a,b){console.log([`Image loaded (${(b=a.target).width} x ${b.height})\n${new Date}`,this])}});
const imageFromDataUrl = (src, callback) => (
	Object.assign(document.createElement("img"), {	// or Object.assign(new Image(), ...
		src
		, onload: callback || function (event, z) {
			console.log([`Image loaded (${(z = event.target).width} x ${z.height})\n${new Date}`, this]);
		}
	})
);

// const blobFromDataUrl=(d,z)=>(z=d.match(/^data:(.*?)(?:;base64)?,(.*)/),new Blob([Uint8Array.from(atob(z[2]),a=>a.charCodeAt(0))],{type:z[1]||"octet-stream"}));
const blobFromDataUrl = (dataUrl, z) => (
	z = dataUrl.match(/^data:(.*?)(?:;base64)?,(.*)/)
	, new Blob([
		Uint8Array.from(
			atob(z[2])
			, c => c.charCodeAt(0)
		)
	], {
		type: z[1] || "octet-stream"
	})
);	// ~ "application/octet-binary"	// blob = blobFromDataUrl(dataUrl)



const download=(d,f=`file-${+new Date}.txt`,t="octet-stream")=>{const h=URL.createObjectURL(new Blob([d].slice(void 0===d),{type:t})),s=null!==f;return Object.assign(document.createElement("a"),{href:h,[s&&"download"]:f,target:"_blank"}).click(),s&&URL.revokeObjectURL(h)};

// const openInNewWindow=(d,t)=>download(d,null,t);
const openInNewWindow=(d,t="octet-stream")=>Object.assign(document.createElement("a"),{href:URL.createObjectURL(new Blob([d].slice(d===void 0),{type:t})),target:"_blank"}).click();

const exampleDataUrlHashtagPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALEoAACxKAXd6dE0AAAAZSURBVBhXY/h/ks/e4wycZABSyIg0+ZN8AOS0Jbd/VjEXAAAAAElFTkSuQmCC";

const imageToOpenInNewTab = imageFromDataUrl(
	exampleDataUrlHashtagPng
	, function (event, z) {
		console.log([`Image loaded (${(z = event.target).width} x ${z.height})\n${new Date}`, this]);

		const blob = blobFromDataUrl(exampleDataUrlHashtagPng);

		const type = (blob || {}).type || "image/png";

		// display tiny img inside new tab (method 1/2)
		download(blob, null, type);

		// display tiny img inside new tab (method 2/2)
		openInNewWindow(blob, type);
	}
);

const addToBottomOfPage = element => {
	console.log(element);
	document.body.insertAdjacentElement("afterbegin", element);
	document.body.insertAdjacentElement("afterend", element);
	// document.body.append(element);
	// document.body.appendChild(element);
};

console.log(
	newImage.src === exampleDataUrlHashtagPng
	, exampleDataUrlHashtagPng.length
	, { exampleDataUrlHashtagPng }
);

// same Image object, so only 1 is visibly added to bottom of current webpage
addToBottomOfPage(newImage);
addToBottomOfPage(newImage);

// 2 different Image objects, so both are added to webpage (AKA 3 in total when all done)
addToBottomOfPage(imageFromDataUrl(exampleDataUrlHashtagPng));
addToBottomOfPage(imageFromDataUrl(exampleDataUrlHashtagPng));