viewof im = imageInput({
crossOrigin: "anonymous",
initialUrl: await FileAttachment("beastie-boys.jpg").url()
})
im.image
sendImg = {
const button = html`<button>Send Img b64`;
button.onclick = () => send('file-img', objImg.b64);
return button;
}
objImg = {
const compressedBinaryString = pako.deflate(ab, { to: 'string' });
const b64 = btoa(
new Uint8Array(ab).reduce(
(data, byte) => data + String.fromCharCode(byte),
''
)
);
const b64Compressed = window.btoa(compressedBinaryString);
return { b64, b64Compressed };
}
html`<img style="width:100px" src="data:image/jpg;base64,${objImg.b64}">`
{
const compressedBinaryString = window.atob(objImg.b64Compressed);
const arr = pako.inflate(compressedBinaryString);
const b64 = btoa(String.fromCharCode(...arr));
return html`<img style="width:100px" src="data:image/jpg;base64,${b64}">`;
}
viewof dataJ = jsonInput({
initialUrl: await FileAttachment("products.json").url()
})
dataJ
viewof dataT = txtInput({
initialUrl: await FileAttachment("addresses.csv").url(),
accept: ".txt,.csv,.js,.css"
})
dataT
pako = require('https://cdn.jsdelivr.net/npm/pako@1.0.11/dist/pako.min.js')
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.
