Hi!
This is a tutorial to convert an image to HTML pixel by pixel, with this you can analyze your image :)
first, you need some HTML
<!-- canvas need to be hidden, here you will load your image and take information about it -->
<canvas
id="canvas"
style="visibility: hidden;"
></canvas>
<!-- here you will print your matrix of span tags, each of them with a single color -->
<div
id="final-image"
style="line-height: 7px;letter-spacing: -3px;"
></div>
now some javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const imgUrl = "https://images.unsplash.com/photo-1549740425-5e9ed4d8cd34?ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwzOTU0NTB8fGVufDB8fHw%3D&ixlib=rb-1.2.1&w=1000&q=80";
const img = new Image();
const imgWidth = 100;
let html = "";
img.crossOrigin = "Anonymous";
img.onload = function() {
canvas.width = imgWidth;
canvas.height = (this.height * canvas.width) / this.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
for (let i = 0; i < canvas.height; i++) {
for (let j = 0; j < canvas.width; j++) {
add(ctx.getImageData(j, i, 1, 1).data);
}
html += "<br />";
}
document.getElementById("final-image").innerHTML = html;
canvas.parentNode.removeChild(canvas);
};
img.src = imgUrl;
function add(c) {
html += `<span style="color: rgb(${c[0]}, ${c[1]}, ${c[2]});">■</span>`;
}
with this code, you can print your image on text
Top comments (1)
Get an image data (convert it into an array of pixels so I could edit it) and then return the edited array back from the pixels editing function so that I could use these edited values to draw an edited image. love binding spell