Rust Wasm BlurHash

A Rust and WebAssembly implementation of the BlurHash algorithm.

BlurHash is "a compact representation of a placeholder for an image." It enables you to store that representation in your database. It can then be transferred together with the initial data, in order to decode and show it, before the main image request has finished (or even started).

You can seamlessly use it in the browser through JS imports and bundling.

npm install blurhash-wasm

import * as blurhash from "blurhash-wasm";

// You can use this to construct canvas-compatible resources
try {
  const pixels = blurhash.decode("LKO2?U%2Tw=w]~RBVZRi};RPxuwH", 40, 30);
} catch (error) {
  console.log(error);
}

Credits

The Blurhash algorithm was originally written by Dag Ågren. Implementations are maintained by folks at Wolt and outside.
blurhash-wasm is written by Fotis Papadogeorgopoulos.

Sources and installation

Demo

A mountain range in blue and pale purple colours.

Photo by Edgar Hernández on Unsplash

A panoramic view of white and blue roofs on a Greek island.

Photo by Benjamin Behre on Unsplash

A row of coloured buildings, on a curved stret.

Photo by Jonathan Ricci on Unsplash