Open Joshandrews43 opened 8 months ago
I'm looking for the same. I'm uploading images from a react-native mobile app and it would be great to generate a hash to go along with the upload. It seems like we need to do the following steps:
rgba
value of the pixel (I don't know how to do this yet)rgbaToThumbHash
- but I'm confused about the return value of this function - it's not a string/hash? I'm looking to use the hash with expo-image
I might also be unblocked if there was a base64ToThumbHash
function
Sorry, I don't know anything about React Native.
Pass the pixel array to
rgbaToThumbHash
- but I'm confused about the return value of this function - it's not a string/hash?
It's a buffer of bytes (specifically a Uint8Array
). You can get a string from a buffer by converting the buffer to base64, and you can get a buffer from a string by converting the string from base64. This is already in the JavaScript example code:
const binaryThumbHash = ThumbHash.rgbaToThumbHash(pixels.width, pixels.height, pixels.data)
// ThumbHash to data URL
const placeholderURL = ThumbHash.thumbHashToDataURL(binaryThumbHash)
// If you want to use base64 instead of binary...
const binaryToBase64 = binary => btoa(String.fromCharCode(...binary))
const base64ToBinary = base64 => new Uint8Array(atob(base64).split('').map(x => x.charCodeAt(0)))
const thumbHashToBase64 = binaryToBase64(binaryThumbHash)
const thumbHashFromBase64 = base64ToBinary(thumbHashToBase64)
@evanw btoa
does not exist in a react native context, I think that's where the issue is. I am not too familiar with image encoding and decoding, so I think an example that works in that environment would be super helpful. Additionally, getting the raw pixel data pixels.data
is not as easy without canvas in react native.
Edit: Updating to add that I commented on an expo dev's release post for support for this library with expo-image
and they're going to be releasing a native implementation built in soon.
@Joshandrews43 can you share a link to that post?
Hi,
Library looks super cool, I am just pretty bad with photo handling and was hoping someone could provide a react native example with minimal dependencies
Thanks!