4 ms·

Thanks for your feedback. I originally wanted to override the img tag (seems obvious right?) but it turns out you cannot get access to the image data for securi

Thanks for your feedback. I originally wanted to override the img tag (seems obvious right?) but it turns out you cannot get access to the image data for security reasons, even from a class that extends image, even for images from the same domain. It would be possible to have an external script the post processes img files on the page, but then you lose the nice as-dithered-image encapsulation. It may be a better way to go in practice though. Using a web worker is certainly something I considered and maybe I will get around to implementing it. Copying data as you suggest is possible but I found that doing it on the main thread was "fast enough" for a reasonable number of images.

lelandfe 4y ago
Instead of loading in the page, and then accessing that image, disable the loading entirely by using e.g. `data-src` instead of `src` in the HTML. You then fetch() the URL in that data attribute in your Javascript. Here's a straightforward tutorial covering that: https://trezy.com/blog/loading-images-with-web-workers https://trezy.com/blog/loading-images-with-web-workers [0] Note that this does mean the images will be delayed from loading, and will cause a layout shift when they're finally inserted. It's best to inline the image's height & width into the HTML if you know them in advance (or use `aspect-ratio`): https://www.aleksandrhovhannisyan.com/blog/setting-width-and-height-on-images/ https://www.aleksandrhovhannisyan.com/blog/setting-width-and... [0] Just as a note, the tutorial says "<img> tags actually block your application load," which is very wrong.
- AndrewStephens 4y ago
  Interesting, I hadn’t considered that. Maybe I could realize my dream of extending the img tag after all.