andrewstephens75 / as-dithered-image Goto Github PK

Random ideas for the future (in no particular order)

Make sure none of these changes break printing

• add image-rendering: crisp-edges or pixilated to the canvas css
• have another attempt at handling fractional device pixel ratios
• cache the src image once, don't load it every time
• automatically apply the aspect ratio when the new image loads
• do something if the image fails to load (show placeholder icon?)
• Move dithering to worker. Cancel outstanding operations on subsequent resizing.
• Try to reduce redraws during resizing - possibly defer resizing until no resize events have been seen for 10ms or something
• defer resizing if the component is off-screen, performing the operation just as it scrolls into view with the Intersection API : https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• display something during resizing, a placeholder image or icon.
• support a dither attribute to swap in alternate dithers (Sierra dithering looks interesting https://github.com/nwj/dither)
• support a threshold attribute to control the threshold between light and dark (0.0 - 1.0, 0.5 is the default)
• support dark and light attributes to control the color of the resulting image. Do we dither assuming these will be black and white and then just force the color or actually dither to those colors (much harder)?
• maybe have a setting to set one of the colors to transparent (for slightly off-white backgrounds, etc)
• have another attempt at extending the img tag. We cannot get access to the image data but perhaps you can fetch the src and render a replacement canvas over the top.

Hi @andrewstephens75 . Thanks for this component. I'm hoping to possibly use it in a small festival site that is using diffused dithered images in its marketing campaign.

Can the component be used for a full width and height image background layer that fills the viewport in an object-fit: cover manner?

I've tried a few things but not sure if it's worth pursuing further if the underlying component doesn't really support it.

Thanks!

When loading into the page with non native scaling and changing the mode to "pixel", then Firefox outputs random glitching dependent on page scale:
Firefox v109

Google Chrome 109.0.5414.75 straight up just shows nothing:

macos 12.6.1

google chrome Version 107.0.5304.87 (Official Build) (x86_64)

scaled 1024x1280 90* rotation

https://imgur.com/7LSD7BX

same result in safari, works on firefox though

Hey! Having a lot of fun implementing things with this little script and I'm enjoying the results. Thanks for writing this!

Would it be possible to add ordered/Bayer dithering as an option?

Ordered dithering produces "worse" results than Atkinson dithering because of the visible cross-hatch effect, but some of us (me) think that effect is cool :)

And on the plus side, ordered dithering is very fast to execute.

Really cool component.

Here are some quick thoughts (could be a pull-request but I just wanted to put this out there):

• How about using gray-scale images as placeholders during resizing operations? Use the browser's native (fast) rescaling for "smooth" resizing. Then, dither only when the resizing stops or is paused.
• Also, you could use the Cache API to cache the dithered versions so if the user resizes again to the same size (likely), you incur no dithering lag/cost? https://medium.com/javascript-dots/cache-api-in-javascript-644380391681