JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

CSS

body {
	margin: 0;
	font-family: monospace;
	font-size: 2px;
	white-space: pre;
}

JavaScript

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

let img = new Image();

let pixels = [" ", ".", "-", "M", "O", "#"];

img.onload = function() {
	canvas.width = img.width;
	canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
	
	let imageData = ctx.getImageData(0, 0, img.width, img.height);
	
	let result = imageData.data.batch(4).reduce((a, c, i) => {
		let avg = (c[0] + c[1] + c[2]) / 3;
		let pixel = pixels[((avg / 255) * pixels.length) | 0];
		return a + pixel + (i % (imageData.width) !== 3 ? "" : "\n");
	}, "");
	
	document.body.textContent = result;
};

Uint8ClampedArray.prototype.batch = function(size) {
	let result = [];
	
    for (let i = 0; i < this.length; i += size) {
		let subResult = [];
		
        for (let j = 0; j < size; ++j) {
			subResult.push(this[i + j]);
        }
		
		result.push(subResult);
    }
	
	return result;
};

img.src =...