open web tools for creativity and community
Published
Edited
Jan 29, 2021
3 stars
viewof input = fileInput({
initialValue: FileAttachment("sample01.jpg").blob(),
accept: ".jpg,.jpeg"
})
depthInfo = getDepthInfo(input)
depthInfo &&
depthInfo.hasDepth &&
html`
<div style="display: grid; grid-gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));">
<img src=${URL.createObjectURL(input)} style="width: 100%;" />
<img src=${depthInfo.url} style="width: 100%;" />
</div>
`
getDepthInfo = async function(input) {
const info = await exifr.parse(input, {
// We don't need TIFF, nor thumbnail, so skip this segment (enabled by default).
tiff: false,
// Depth map is stored in an XMP Extended segment (not the main one).
xmp: true,
// We need to tell exifr not to stop at the first XMP segment, but to find them all.
multiSegment: true,
// There will be mutliple XMP namespaces (GDepth, GImage) with the same properties (Mime, Data).
// We don't want them to overwrite each other.
mergeOutput: false
});
if (info && info.GDepth) {
const { Data, Mime } = info.GDepth;
const url = `data:${Mime};base64,${Data}`;
return { hasDepth: true, info, url };
}
return { hasDepth: false };
}
exifr = import('https://unpkg.com/exifr@6.0.0/dist/full.esm.mjs')
import { fileInput } from "@mbostock/file-input-with-initial-value"
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.
