react-blurhash
react-blurhash copied to clipboard
woltapp
Why canvas?
Why not just wrap the decoded UInt8ClampedArray straight into a Blob of the appropriate bitmap mime-type and URL.createObjectUrl(blob) (making sure to appropriately URL.revokeObjectUrl on hash change or unmount) to create an image URL for a standard img tag (or anywhere an image source can be used such as CSS background-url)? It allows you more style options in CSS over the hash, and it makes it easier to swap in a real URL later when things have "loaded" without changing so many DOM elements in the process. Canvas seems like overkill for rendering the BlurHash in most scenarios to me, but maybe I'm missing something?
Blobs should be supported everywhere that UInt8ClampedArray is, so it doesn't seem like a compatibility issue to me.
https://caniuse.com/#feat=bloburls
https://caniuse.com/#feat=blobbuilder
Had some time to prototype this afternoon. I couldn't find a mime-type that emulated the simple pixel format of ImageData, so it still needs a temporary canvas for the immediate work, but canvas has a handy toBlob.
Here's a gist of a simple hook-based approach: https://gist.github.com/WorldMaker/a3cbe0059acd827edee568198376b95a
(ETA: Tested it with a basic img tag and a simple CSS spin animation on it, and things seems good.)
@WorldMaker the hook you published was useful. I didn't want to get into flipping between canvas and img. Especially when I am using srcset. To that end, I've made a BlurImg component.
The component is a very thin wrapper over img that mostly stays out of the way. It uses browser-native loading="lazy" to lazy load images. It renders a blurhash value to a blob when it about to appear on screen, but only when the image hasn't loaded yet. Once the image has finished loading, it removes the blob and background.
Here's a gist with the BlurImg component and an updated useBlurhash:
https://gist.github.com/ngbrown/d62eb518753378eb0a9bf02bb4723235
@ngbrown you should consider opening a PR, the useBlurhash hook is really useful
@kyle-mccarthy pull request to what? Neither the useBlurhash hook nor the BlurImg component use react-blurhash, what this repository is.
I understand. Since the hook would be limited to react I don’t see a reason to fragment it into another package. It would be an addition to this package. On Jun 1, 2020, 9:09 PM -0500, Nathan Brown [email protected], wrote:
@kyle-mccarthy pull request to what? Neither the useBlurhash hook nor the BlurImg component use react-blurhash, what this repository is. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.
