Use ImageDecoder for Image decoding where possible

[william-silversmith]

Hi Jeremy,

I was playing around with this for a few minutes, but was having trouble with typescript so figured I'd just ask what you think first.

Ryan Morey and Ran Lu called my attention to the fact that https://developer.mozilla.org/en-US/docs/Web/API/ImageDecoder is now available in most browsers which would allow for access to optimized codecs. I was thinking we could possibly do a polyfill for jpg, png, and jpegxl.

I think Chrome and Firefox would immediately benefit for jpeg and png.

It seems Safari has native support for JXL, Firefox has it behind a flag, but Safari does not have a working ImageDecoder yet, so only Firefox would benefit.

Let me know what you think and maybe we can develop a proof of concept.

[william-silversmith]

I managed to get a POC working. Strangely, I'm not sure it's faster than jpgjs. Perhaps the JS optimizer has gotten a lot better over the years.

See what you think: https://github.com/william-silversmith/neuroglancer/tree/wms_imagedecoder

[jbms]

I suspect this method may be faster than using a canvas: https://developer.mozilla.org/en-US/docs/Web/API/VideoFrame/copyTo

However, I think the OffscreenCanvas approach can be used with ImageBitmap as a fallback if ImageDecoder isn't available.

Even if it isn't faster, reducing the bundle size is still advantageous if it isn't slower or otherwise worse.