-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ideas for future improvements #4
Comments
Updated the list to reflect the changes in version2 |
Thanks for the report - the goal here is always to match pixel-for-pixel with each real pixel being either fully black or fully white, so I have tried to avoid bilinear filtering. I tried very hard to deal with non-integer devicePixelRatios but obviously I failed for some use cases. There really is no good solution, just workarounds. |
Nice project!! 🎉 Looking at your codes recall many fun memories building <img-victor>, which shares the many common logic of processing the imgData. Based on my experiences of building it, some suggestions:
|
Hi 9am, thank you for your kind words. Your project looks really cool. I considered having a pending status while the image is being processed but processing turned out to be so quick on modern machines that I thought it was better to just to get on with displaying the real image rather than flashing up a placeholder. I am not very experienced in using workers - I'll take a look at your implementation. That said, I don't think it will make much difference unless you have a lot of dithered images on screen at the same time. I haven't found a good way around your third point apart from forcing the user to specify the size up-front. This is supposed to be a drop-in replacement for the image tag, which works much the same way. Finally, I figured that installing two files is not a huge burden on anyone that wants to use my project. I have another round of improvements planned when I get the time so maybe I'll change my mind then. |
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 csshave another attempt at handling fractional device pixel ratioscache the src image once, don't load it every timeautomatically apply the aspect ratio when the new image loadsMove 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 somethingdefer 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_APIsupport a threshold attribute to control the threshold between light and dark (0.0 - 1.0, 0.5 is the default)The text was updated successfully, but these errors were encountered: