🔌 • 2500x: a terrible, new image format
this says it all
Why?
Because then you can do all sorts of funny things to the image with arbitrary CSS properties.
look at the knobs!
How does it work?
1// Create html text for 2500x image
2const create2500xImage = (canvas) => {
3 var htmlOut = "";
4 const imageData = canvas
5 .getContext("2d")
6 .getImageData(0, 0, canvas.width, canvas.height);
7
8 for (let y = 0; y < canvas.height; y++) {
9 var row = "";
10 for (let x = 0; x < canvas.width; x++) {
11 const color = getPixelXY(imageData, x, y);
12 row += `<p style='color:rgb(${color[0]},${color[1]},${color[2]})'>.</p>`;
13 }
14 htmlOut += `<div>${row}</div>`;
15 }
16
17 return htmlOut;
18};
I hate this
It traverses an image pixel by pixel, reads each pixel’s rgb value, and concatenates a <p> tag with the same rgb value. The website limits this to images of some fixed, “reasonable”, resolution, since doing this on larger images pretty much guarantees that rendering the HTML will crash your browser, which I’ve heard is bad UX.