Public
Edited
Oct 20, 2023
image = {
const img = new Image();
img.crossOrigin = "*";
FileAttachment("iStock_000045742478_Med.jpg").image().then((i) => {
img.src = i.src;
});
return img;
}
{
var targetCanvas = document.createElement("canvas");
targetCanvas.width = width;
targetCanvas.height = height;
var target = targetCanvas.getContext('2d');
target.drawImage(image, 0, 0, width, height);
var imageData = target.getImageData(0, 0, width, height);
return html`<pre style="line-height: 0.7">${
d3.range(height).map(
y => d3.range(width).map(
x => colorToHTML(pixelFromImageData(imageData, x, y))
).join('')
).join('\n')
}</pre>`;
}
colorToHTML = ([r, g, b]) => {
return `<span style="color: rgb(${r}, ${g}, ${b})">${randomChar()}</span>`
}
randomChar = () => {
var chars = '#W0M8@B';
return chars[Math.floor(Math.random()*chars.length)];
}
pixelFromImageData = (imageData, x, y) => imageData.data.slice(
(y * imageData.width + x) * 4,
(y * imageData.width + x) * 4 + 3
)
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
