Log images or pixels to the console.

console2.ts

class console2 {
	static image(url: string, size = 100) {
		fetch(url)
			.then((res) => res.blob())
			.then((blob) => {
				const reader = new FileReader();
				reader.onloadend = () => {
					const dataUrl = reader.result as string;
					const style = [
						'font-size: 1px;',
						`padding: ${size}px ${size}px;`,
						'background: url(' + dataUrl + ') no-repeat;',
						'background-size: contain;'
					].join(' ');
					console.log('%c ', style);
				};
				reader.readAsDataURL(blob);
			})
			.catch((err) => {
				console.error(err);
			});
	}
	static pixels(pixels: number[][], size = 100) {
		const canvas = document.createElement('canvas');
		const ctx = canvas.getContext('2d');
		if (ctx) {
			canvas.width = pixels[0].length;
			canvas.height = pixels.length;
			const imageData = ctx.createImageData(canvas.width, canvas.height);
			for (let x = 0; x < pixels[0].length; x++) {
				for (let y = 0; y < pixels.length; y++) {
					const value = pixels[y][x]
					const index = (y * canvas.width + x) * 4;
					imageData.data[index] = value;     // R
					imageData.data[index + 1] = value; // G
					imageData.data[index + 2] = value; // B
					imageData.data[index + 3] = 255;   // A
				}
			}
			ctx.putImageData(imageData, 0, 0);
		}

		const dataURL = canvas.toDataURL();
		const style = [
			'font-size: 1px;',
			`padding: ${size}px ${size}px;`,
			'background: url(' + dataURL + ') no-repeat;',
			'background-size: contain;',
		].join(' ');
		console.log('%c ', style);
	}
}