Visualize pictures stored as binary (PNG, JPEG, etc.)

[axelboc]

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's src 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).