blurhash-wasm

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.

Usage in JS

Installation

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.

decode

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);
}

encode

Implented, aim to be published in 0.3.0

Usage in Rust

Installation

You will need Rust and Cargo.

Add the version you want to Cargo.toml:

[dependencies]
blurhash-wasm = "0.1.0"

decode

use blurhash_wasm;

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

encode

Implented, aim to be published in 0.3.0

About the setup

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.

🚴 Usage

🛠️ Build with wasm-pack build

wasm-pack build

🔬 Test in Headless Browsers with wasm-pack test

wasm-pack test --headless --firefox

🎁 Publish to NPM with wasm-pack publish

wasm-pack publish

🔋 Batteries Included

• 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.