Skip to content

Vite plugin to create blurhash strings for all images inside a certain directory, or from the provided set of images. Hashes are then saved to an output file and stored in vite's define global variables.

License

Notifications You must be signed in to change notification settings

nickgraffis/vite-plugin-blurhash

Repository files navigation

vite-plugin-blurhash

Install

npm i vite-plugin-blurhash -D # yarn add vite-plugin-md -D

Add it to vite.config.js

import Blurhash from 'vite-plugin-blurhash'

export default{
	plugins:[
		...plugins,
		Blurhash() //Hashing images from /src/assets/images
	]
}

Use

Blurhash strings are saved as a camelcase version of the file name and path from the root. For example if you use the default image directory /src/assets/images, and your file structure looks like this:

- images
--- rick-and-morty.png
--- blog-images
-------- solar-opposites.png

You would get blurhash strings at the following variables:

rickAndMortyPng
blogImagesSolarOppositesPng

Use the hash strings anywhere inside the app. Maybe with something like vue-blurhash.

<template>
  <blur-hash-image
    width="400"
    height="300"
    :hash="rickAndMortyPng"
    src="https://images.unsplash.com/photo-1545910684-8e7c081be9b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
    alt="green lawn grass during daytime"
  />
</template>

Your blurhash strings are also stored inside /src/assets/images/blurhash-map.json, so you can feel free to import from there as well.

Options

Blurhash({
	imageDir?:  string  |  boolean, //Where to look for images to hash, or false. Default /src/assets/images
	mapPath?:  string, //Where should the hash map be stored, or false. Default /src/assets/images/blurhash-map.json
	define?:  boolean, //Should we define the hashes as vite variables. Default true
	images?:  Images, //Additional images to hash. { [key: string]: string }
	log?:  boolean, //Should we log progress as we hash
})

Images

You can define images to hash, and their variables names in this option. Images here can be local paths are urls.

Blurhash({
	images: {
		waterMelon:  'https://solidstarts.com/wp-content/uploads/when-can-babies-eat-watermelon.jpg',
		flamingo:  '/src/assets/flamingo.jpg'
	}
})

Now you'll have access to waterMelon and flamingo inside the app.

Other options

  • Define: Should we store the resulting hashes inside of vite variables. Defaults to true.
  • Log: Should we log progress as we hash. Defaults to true.
  • imageDir: Where to look for images to hash, or false to not look for images inside of a directory. This means that we will only look for images inside of the images parameter. Defaults to /src/assets/images.
  • mapPath: Where should the hash map be stored, or false to not store it. Defaults to /src/assets/images/blurhash-map.json.

Thanks

  • 🌫 woltapp/blurhash - the original blurhash library.
  • ⚡️ vite - it's rad.
  • 🙏 @antfu - learned a lot from his work.
  • All the other great libs used in this project.

About

Vite plugin to create blurhash strings for all images inside a certain directory, or from the provided set of images. Hashes are then saved to an output file and stored in vite's define global variables.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published