Strapi Plugin: strapi-blurhash-plugin

A plugin for Strapi CMS that generates blurhash for your uploaded images via the woltapp/blurhash algorithm.

Installation

To install, run:

npm install strapi-blurhash-plugin

Open or create the config/plugins.js file. Enable this plugin by adding:

1module.exports = {
2    // ...
3    'strapi-blurhash-plugin': {
4        enabled: true,
5        config: {
6            regenerateOnUpdate: true
7        }
8    },
9    // ...
10}

How to generate blurhash for an image

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.

How to get blurhash

Target a Strapi REST API endpoint. For example:

1localhost:1337/api/products?populate=Image.*

The response will be a JSON containing blurhash along with rest of the image data:

1{
2  "data": [
3    {
4      "id": 6,
5      "attributes": {
6        "name": "Test",
7        "createdAt": "2022-10-27T14:52:04.393Z",
8        "updatedAt": "2022-10-28T09:58:22.238Z",
9        "Image": {
10          "data": {
11            "id": 80,
12            "attributes": {
13              "name": "image.png",
14              "alternativeText": "image.png",
15              "caption": "image.png",
16              "width": 960,
17              "height": 168,
18              "formats": {
19                ...
20              },
21              "hash": "image_ed1fbcdba0",
22              "ext": ".png",
23              "mime": "image/png",
24              "size": 4.63,
25              "url": "/uploads/image_ed1fbcdba0.png",
26              "previewUrl": null,
27              "provider": "local",
28              "provider_metadata": null,
29              "createdAt": "2022-10-28T09:42:02.471Z",
30              "updatedAt": "2022-10-28T09:42:02.471Z",
31              "blurhash": "U{Nd,T?bof?u_Nxuj[x[objZayoe_Mxuj[x["
32            }
33          }
34        }
35      }
36    }
37  ],
38  "meta": {
39    "pagination": {
40      "page": 1,
41      "pageSize": 25,
42      "pageCount": 1,
43      "total": 1
44    }
45  }
46}