A Rust implementation of the blurhash algorithm.

It is compiled to WebAssembly (WASM), and available on npm as blurhash-wasm.

BlurHash is an algorithm written by Dag Ågren and folks at Wolt (woltapp/blurhash). 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).

Online Demo.

You will need a package manager, either npm (comes with node) or yarn.

You will also need a bundler, webpack or Rollup, configured for your project.

Then, in a terminal:

npm install blurhash-wasm
# Or, yarn add blurhash-wasm

The demo app source has a complete example of using 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);
}

Implented, aim to be published in 0.3.0

You will need Rust and Cargo.

Add the version you want to Cargo.toml:

[dependencies]
blurhash-wasm = "0.1.0"

use blurhash_wasm;

// Result<Vec<u8>, blurhash::Error>
let res = blurhash::decode("LKO2?U%2Tw=w]~RBVZRi};RPxuwH", 40, 30);

Implented, aim to be published in 0.3.0

Based on the rust wasm-pack template

This template is designed for compiling Rust libraries into WebAssembly and publishing the resulting package to NPM.

Be sure to check out other wasm-pack tutorials online for other templates and usages of wasm-pack.

wasm-pack build

wasm-pack test --headless --firefox

wasm-pack publish

• wasm-bindgen for communicating between WebAssembly and JavaScript.
• console_error_panic_hook for logging panic messages to the developer console.
• wee_alloc, an allocator optimized for small code size.