Generate a JSON file containing the blurhash of your cloudinary media library
Cloudinary BlurHash is a project that will generate a JSON file mappig your Cloudinary images, with their blurhash equivalent.
This project consist of 3 scripts:
transformer/index.js
( AKA the server ).map.js
will map your cloudinary images to their blurhashcontext.js
will add the blurhash as context of your image meta-data_ For the map.js
, you'll have to create the file data/map.json
manually before running the project._
You'll need to have a Cloudinary account, and you'll need get your Cloudinary CLOUD_NAME
, API_KEY
and API_SECRET
and add them to the .env
( See .env.example
).
You can also add a PORT
variable, if you have any preference, otherwise it'll fallback on the port 5000
.
Once you've got your .env
ready, open two terminals:
yarn server
yarn start
The server is a simple express server that got 2 different endpoints:
/transform
will process your image live ( beware, it's slow )/context
will return the blurhash metadata from your imageTo pass it an image, use the q
parameter:
localhost:8080/transform/?q=<imageUrl>
or localhost:8080/context/?q=<imageUrl>
for this query: http://localhost:8080/context/?q=https://res.cloudinary.com/hilnmyskv/image/upload/v1528201739/algolia_logo.png
;
the /context
endpoint will respond with:
"Ug97[f%Qx{tUj=j]j^j?M[R=WGWZbKaxa$ax"
for this query: http://localhost:8080/transform/?q=https://res.cloudinary.com/hilnmyskv/image/upload/v1528201739/algolia_logo.png
;
the /transform
endpoint will respond with:
{
"hash": "Ug97[f%Qx{tUj=j]j^j?M[R=WGWZbKaxa$ax",
"processed_in_ms": 95
}
Learn more about BlurHash
Test your BlurHash in our online playground: https://blurhash-sandbox.surge.sh/
This project uses the Cloudinary NodeJS SDK and BlurHash (TypeScript).
Thanks to my dear colleague @Haroenv for his help on improving the final script.