Visualize pictures stored as binary (PNG, JPEG, etc.)
axelboc opened this issue · comments
Axel Bocciarelli commented
Discussed in #1551
Originally posted by Flydroid January 23, 2024
Hi,
I have been evaluating different options to store images in an HDF5 file.
Because build-in methods come with a large file size, we are storing png files as binary data (u8 array) in HDF5.
What would be really cool is, if h5web would support the decoding of the PNG data to then display the image.
Unfortunately i have don't have typescript experience to really contribute directly.
- The goal would be to support the most common picture formats supported by modern browsers (at least PNG and JPEG), as the decoding would be left to the browser via the
img
tag. - The pictures binary data would have to be stored as
H5T_OPAQUE
datasets in HDF5 in order to trigger the appropriate visualization in H5Web. I'm still debating whether this should be a new visualization called Opaque or the existing Raw visualization but I'm tipping towards the latter. - If the visualization detects the magic numbers of a known picture format, it generates a blob URL from the binary data and pass it to an
img
element'ssrc
attribute so the browser can display the image. - Ideally, we should also support displaying stacks of pictures stored as multi-dimensional opaque datasets (i.e. one image at a time, with sliders on the left).