Public
Edited
Feb 5, 2023
1 fork
9 stars
Insert cell
Insert cell
QOI = (await import("https://esm.sh/qoijs@1.0.0")).default
Insert cell
test = {
const width = testcard.naturalWidth;
const height = testcard.naturalHeight;
const im = DOM.context2d(width, height, 1);
im.drawImage(testcard, 0, 0);
return { ...im.getImageData(0, 0, width, height), width, height };
}
Insert cell
encoded = QOI.encode(test.data, {
width: test.width,
height: test.height,
channels: 4,
colorspace: 0
})
Insert cell
image_qoi = new Blob([encoded], { type: "image/qoi" }) // download and save as testcard.qoi
Insert cell
compressed = FileAttachment("testcard.qoi").arrayBuffer()
Insert cell
decoded = QOI.decode(compressed)
Insert cell
Insert cell
decoded.data.some((d, i) => d !== test.data[i])
? md`🪳 **failure**!`
: md`👍 it works!`
Insert cell
testcard = FileAttachment("testcard.png").image()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more