blurhash-map
npm install blurhash-map
// 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}
`
);
});
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 |
scripts:{
"blurhash-watch":"blurhash-map -a \"assets/images\" -e \"jpg,jpeg,bmp\" -x 4 -x 3 -t \"assets/hashmap.json\""
}
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"
}
Initialize BlurHashMap
asynchronously. Creates .hash
files and generates hash-map.json
.
Generates a hash file if image is found. If Image is not found, deletes the .hash
file of it.
Returns the relative path of the given file
to the assetsRoot
Creates hash-map.json
from the found .hash
files