A plugin that generates blurhash & dataurl for your uploaded images
npm install strapi-blurhash-and-dataurlA plugin for Strapi CMS that generates blurhash for your uploaded images.
To install, run:
``bash`
npm install strapi-blurhash
Open/create file config/plugins.js. Enable this plugin by adding:
`js`
module.exports = {
...
'strapi-blurhash': {
enabled: true,
config: {
regenerateOnUpdate: true,
forceRegenerateOnUpdate: false,
}
},
}
Config explanations:
- If forceRegenerateOnUpdate is true, the plugin disregards whether the blurhash already exists and generates a new one.regenerateOnUpdate
- If is true (and forceRegenerateOnUpdate is false), the blurhash will only be generated if it is currently missing. This is a more conservative approach that avoids unnecessary processing but ensures blurhashes are eventually generated for all images.
Both of these values are going to be false if omitted.
In the Strapi Dashboard open Content Manager. Edit one collection/single type. Add or edit a Media field type and save the collection/single type.
Target a Strapi REST API endpoint. For example:
`
localhost:1337/api/products?populate=Image.*
The response will be a JSON containing blurhash along with rest of the image data:
`js`
{
"data": [
{
"id": 6,
"attributes": {
"name": "Test",
"createdAt": "2022-10-27T14:52:04.393Z",
"updatedAt": "2022-10-28T09:58:22.238Z",
"Image": {
"data": {
"id": 80,
"attributes": {
"name": "image.png",
"alternativeText": "image.png",
"caption": "image.png",
"width": 960,
"height": 168,
"formats": {
...
},
"hash": "image_ed1fbcdba0",
"ext": ".png",
"mime": "image/png",
"size": 4.63,
"url": "/uploads/image_ed1fbcdba0.png",
"previewUrl": null,
"provider": "local",
"provider_metadata": null,
"createdAt": "2022-10-28T09:42:02.471Z",
"updatedAt": "2022-10-28T09:42:02.471Z",
"blurhash": "U{Nd,T?bof?u_Nxuj[x[objZayoe_Mxuj[x["
}
}
}
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 1
}
}
}
If you've recently installed this plugin and already have existing media content, you can easily update the blurhash for these items. Use the Regenerator plugin to efficiently handle this task:
This additional plugin can automate the process.
instead of canvas due to issues with .webp images.$3
#### Added
- forceRegenerateOnUpdate` configuration option to force the regeneration of blurhash on every update, regardless of the existing blurhash.#### Changed
- added additional explanation to readme