blurhash-as

blurhash-as

Blurhash implementation in AssemblyScript

Install

npm install --save blurhash-as

yarn add blurhash-as

Usage

import * as blurhash from 'blurhash-as';

// Initialize the wasm module, optional
blurhash.init().then(() => {
  console.log('Initialized!');
});

// Encode image data
const hash = await blurhash.encode(imageData, width, height, xComponent, yComponent);

// Decode hash
const imageData = await blurhash.decode(hash, width, height, punch);
// You can also use any values for width and height, it is recommended
// to use a dimension with the same aspect ratio as your component dimensions.

// Generate a CSS sheet
const sheet = await blurhash.toCSSSheet(hash, displayWidth, displayHeight, punch);

// Or generate a Style Object
const style = await blurhash.toCSSObject(hash, displayWidth, displayHeight, punch);

// Or generate an SVG string
const svg = await blurhash.toSVG(hash, displayWidth, displayHeight, punch);

Browser

For browser context, you'll have to use blurhash-as/browser. The API is the same as blurhash-as with the inclusion of setURL for identifying the target WASM file. setURL is required to be called as-early-as-possible before using the provided blurhash functions.

Example in Vite:

import * as blurhash from 'blurhash-as/browser';
import wasmURL from 'blurhash-as/build/optimized.wasm?url';

blurhash.setURL(wasmURL);

Sponsors

License

MIT © lxsmnsyc