blurhash-map

blurhash-map

Install

npm install blurhash-map

Usage

// Generate hash-map for all images in a directory
import { BlurHashMap, BlurHashMapConfig } from 'blurhash-map';

const options: BlurHashMapConfig = {
  assetsRoot: 'assets',
  imageExtensions: ['jpg', 'jpeg'],
  components: { x: 4, y: 3 },
  targetJson: 'assets/test-map.json',
};
const blurHashGenerator = new BlurHashMap(options);

return blurHashGenerator.init().then(() => {
  // Now, there should be files created next to images
  // with the same name but having `.hash` suffix. You should commit these files
  // to avoid re-generate them next time you run `BlurHashMap`.
  console.log(
    `
    - Blurhash for all files at: ${options.assetsRoot} created.
    - Generated hash-map saved here as ${target.targetJson}
    `
  );
});

API

BlurHashMap(config)

config

Type: BlurHashMapConfig

param	type	required	description
assetsRoot	string	yes	Where to find the images
hashMapJsonPath	string	yes	Where to save generated JSON
imageExtensions	Array	no	Define which image files. Default : 'jpg' | 'jpeg' | 'png' | 'bmp' | 'webp'
components	Object { x: number; y: number }	no	Optional between 1-9. Default {x:4,y:3}. Higher is more detailed blur but longer string
targetJson	string	no	Path to save generated json file. Default: <root>./hashmap\.json

Run as npm script with params:

scripts:{
  "blurhash-watch":"blurhash-map -a \"assets/images\" -e \"jpg,jpeg,bmp\" -x 4 -x 3 -t \"assets/hashmap.json\""
}

Run as npm script with config file:

create a config file called blurhash-maprc.js at the root of your project.

module.exports = {
  assetsRoot: 'assets/images',
  components: { x: 4, y: 3 },
  extensions:['jpg','jpeg','bmp']
  targetJson: 'assets/images/hashmap.json',
};

And then add a script to your package.json file

scripts:{
  "blurhash-watch":"blurhash-map"
}

init()

Initialize BlurHashMap asynchronously. Creates .hash files and generates hash-map.json.

generateOrDelete(imageOrHashFilePath: string, skipIfHasHash = false)

Generates a hash file if image is found. If Image is not found, deletes the .hash file of it.

getShortPath(file: string): string

Returns the relative path of the given file to the assetsRoot

async createJson(): Promise

Creates hash-map.json from the found .hash files