Published
Edited
Apr 24, 2022
PNG parser
png = new Uint8Array(buf)
pixs = {
const pixs = []
const height = data.ihdr.height
const width = data.ihdr.width
for (let row = 0; row < height; ++row) {
for (let col = 0; col < width; ++col) {
const offset = row*4*width + col*4 + 1 + row;
const c = decompressed.slice(offset, offset+4)
pixs.push(c)
}
}
return pixs;
}
canvas = {
const pixScale = 10;
const height = data.ihdr.height
const width = data.ihdr.width
const ctx = DOM.context2d(width * pixScale,height* pixScale);
for (let row = 0; row < width; ++row) {
for (let col = 0; col < height; ++col) {
ctx.beginPath()
ctx.fillStyle = `rgba(${pixs[row*4+col].join(',')})`
console.log(`rgba(${pixs[row*4+col].join(',')})`)
ctx.fillRect(col*pixScale,row*pixScale, pixScale,pixScale);
ctx.fill()
}
}
return ctx.canvas;
}
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.
