3 ms·

This is lovely. I really like the style of the outputted images. A totally pointless and unnecessary technical suggestion: it should be possible to use an img

This is lovely. I really like the style of the outputted images. A totally pointless and unnecessary technical suggestion: it should be possible to use an img tag with an attribute in the HTML src, and do the work using a web worker with an offscreencanvas doing the same work as your canvas is, convert to a blob, and pass that back to the main thread to replace the src of the img. That would push all the work off to a separate thread so you could have loads of them on a page without slowing things down. The only consideration would be whether you can copy from an img tag to an offscreencanvas efficiently. That might be blocked by CORS stuff.

AndrewStephens 4y ago
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.

AndrewStephens 4y ago

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.