Open aytunch opened 4 years ago
There is an advanced implementation in Swift that implements this stuff in https://github.com/woltapp/blurhash/tree/master/Swift/BlurHashKit, specifically https://github.com/woltapp/blurhash/blob/master/Swift/BlurHashKit/ColourProbes.swift.
This is simpler than I expected: the average color is encoded in characters 3-6. (see https://github.com/woltapp/blurhash/blob/master/Algorithm.md#structure).
// In a blurhash, chars 3-6 represent the average color.
// Refer to https://github.com/woltapp/blurhash/blob/master/Algorithm.md
final averageColorStr = blurhash.substring(2, 6);
// _decode83 defined here: https://github.com/fluttercommunity/flutter_blurhash/blob/6bdec75a7352d1e52f3267296d5726e092d3ebec/lib/src/blurhash.dart#L159
final averageColorInt = _decode83(averageColorStr);
// Blurhashes don't include alpha. Set alpha to 0xFF.
final averageColor = Color(0xFF000000 | averageColorInt);
return BlurHash(
hash: blurhash,
color: averageColor,
image: imageUrl,
);
One problem is that I'm seeing a white flash between the solid color and the blurred image. Not sure how to fix that yet.
@ndahlquist thanks for this it is very useful. Do you know how to do the same for the 4 sides of the blurhash image also?
I think for the 4 sides, that's slightly more complicated. You need to add the DC component (the "averageColor" above) with the AC components sampled at the edges of the image (that's what https://github.com/woltapp/blurhash/blob/master/Swift/BlurHashKit/ColourProbes.swift seems to do). As an approximation, you can probably skip the higher-order AC components, and just add the DC + first AC component.
They stated that it is "easy" but I could not find a way to extract the main color of an image from the blurhash code. It also says we can easily extract this info for the sides of the image. Reminds me of Phillips ambilight TVs.
This can be a cool feature.