Decoding

[andreyvital]

Is there a way to decode it to data uri? like data:image/png;base64,(decoded blurhash). So it'd be able to use on different platforms by returning that representation from my API

[patrick-mcdougle]

A slight modification of the JS implementation could do that, however the base64 encoded png version of the blurred image is much larger than the blurhash (defeating the purpose of decreasing network load). Here's what you would use if you wanted to pursue this: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

[andreyvital]

@patrick-mcdougle I mean, the API would return the blurhash, but I don't want to rely on canvas because of environment you know?

[mrousavy]

@andreyvital If you're looking for a react native implementation, I've just written one at https://github.com/mrousavy/react-native-blurhash

[Henzelix]

@andreyvital did you find the solution?

[arminmon]

This might help:

import { decode } from 'blurhash'
import { getImgFromArr } from 'array-to-image'

const pixels = decode('LEHV6nWB2yk8pyo0adR*.7kCMdnj', 32, 32) // Uint8ClampedArray
const image = getImgFromArr(pixels, 32, 32) // HTMLImageElement
const src = image.src  // data:image/png;base64,iVBORw0KGgoAA...

array-to-image

[Rigo-m]

This might help:

import { decode } from 'blurhash'
import { getImgFromArr } from 'array-to-image'

const pixels = decode('LEHV6nWB2yk8pyo0adR*.7kCMdnj', 32, 32) // Uint8ClampedArray
const image = getImgFromArr(pixels, 32, 32) // HTMLImageElement
const src = image.src  // data:image/png;base64,iVBORw0KGgoAA...

array-to-image

This does not answers OP question because it uses canvas.

[PatrickMcLennan]

+1 on this, would love if anyone has a solution.

Currently trying to implement the decode function within a getStaticProps call in server-side Next.js to embed the data uri in the document before sending to the client. This would tick a lot of boxes between UX / Accessibility / CWV, but I'm having a difficult time doing this entirely in Node.js.

EDIT I ended up finding react-blurhash, which works really well in lieu of a pure server-side Node.js solution.

[ioucyf]

yes please. I'd very much like to have the ability to just convert the hash into data from the server suitable to be used as img.src.

please add support for it. 🙏

[mattiaz9]

I made my own decoder (no canvas or node-canvas required).
I use it in my nextjs project, so it does work on both server side and client side.

https://gist.github.com/mattiaz9/53cb67040fa135cb395b1d015a200aff

[hckhanh]

So amazing, I can use with it with React Server Component and Edge Runtime

[Stevemoretz]

Thanks I was able to write a wrapper component around Image, and thanks to this gist now we can easily use blurhash on Image components.

ivansevillaa/use-next-blurhash#15

[Thisen]

In this case, you will need to use something like canvas or sharp to create a data-url. You can find inspiration here in this issue: #43.

Closing. :)