strapi-blurhash-and-dataurl 2.0.0

package/README.md

@@ -0,0 +1,147 @@
+# Strapi plugin strapi-blurhash
+
+A plugin for <a href="https://github.com/strapi/strapi">Strapi CMS</a> that generates blurhash for your uploaded images.
+
+## Installation
+
+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.
+- If `regenerateOnUpdate` 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.
+
+## 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:
+
+```
+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
+    }
+  }
+}
+```
+
+## Regenerating Existing Content
+
+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:
+
+- [Regenerator Plugin](https://github.com/emil-petras/strapi-regenerator?tab=readme-ov-file)
+
+This additional plugin can automate the process.
+
+## Links
+
+[npm blurhash package](https://www.npmjs.com/package/strapi-blurhash)
+
+[github blurhash source](https://github.com/emil-petras/strapi-blurhash)
+
+## Changelog
+All notable changes to this project will be documented in this section.
+
+### [1.2.1]
+#### Changed
+- now using `sharp` instead of canvas due to issues with .webp images.
+
+### [1.2.2]
+#### Added
+- `forceRegenerateOnUpdate` configuration option to force the regeneration of blurhash on every update, regardless of the existing blurhash.
+
+### [1.2.3]
+#### Fixed
+- fixed a bug with the image url
+
+### [1.2.4]
+#### Fixed
+- fixed a bug with the image url var
+
+### [1.2.5]
+#### Changed
+- updated the readme file
+
+### [1.2.6]
+#### Changed
+- updated tags
+
+### [1.2.7]
+#### Fixed
+- fixed forceRegenerateOnUpdate defaults
+
+#### Changed
+- added additional explanation to readme
+
+### [1.3.0]
+#### Changed
+- removed sharp dependency

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "strapi-blurhash-and-dataurl",
+  "version": "2.0.0",
+  "description": "A plugin that generates blurhash & dataurl for your uploaded images",
+  "keywords": [
+    "strapi",
+    "plugin",
+    "media",
+    "blurhash"
+  ],
+  "homepage": "https://github.com/Gaylord-Julien/strapi-blurhash-and-dataurl#readme",
+  "bugs": {
+    "url": "https://github.com/Gaylord-Julien/strapi-blurhash-and-dataurl/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Gaylord-Julien/strapi-blurhash-and-dataurl.git"
+  },
+  "license": "MIT",
+  "author": "Emil Petras (https://github.com/emil-petras)",
+  "maintainers": [
+    {
+      "name": "Emil Petras",
+      "url": "https://github.com/emil-petras"
+    }
+  ],
+  "type": "commonjs",
+  "main": "strapi-server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "webp-wasm": "^1.0.4",
+    "blurhash": "^1.1.4",
+    "node-fetch": "^3.1.0",
+    "canvas": "^2.11.2"
+  },
+  "peerDependencies": {
+    "@strapi/strapi": "^5.0.0"
+  },
+  "engines": {
+    "npm": ">=6.0.0"
+  },
+  "strapi": {
+    "name": "strapi-blurhash",
+    "description": "A plugin that generates blurhash & dataurl for your uploaded images",
+    "kind": "plugin",
+    "displayName": "Strapi Blurhash and DataURL"
+  }
+}

package/server/bootstrap.js

@@ -0,0 +1,72 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  const blurhashService =
+      strapi.plugin('strapi-blurhash').service('blurhash');
+
+  const host = strapi.config.get('server.host', 'localhost');
+  const port = strapi.config.get('server.port', 1337);
+  const baseUrl = `${host.startsWith('http') ? host : `http://${host}`}:${port}`;
+
+  const isImage = (mime) => mime?.startsWith('image/');
+  const buildUrl = (url) => (url.startsWith('http') ? url : `${baseUrl}${url}`);
+
+  const handleBlurhash = async (event, eventType) => {
+    const { data, where } = event.params;
+
+    // ------------------------
+    // CREATE
+    // ------------------------
+    if (eventType === 'beforeCreate' && isImage(data.mime)) {
+      const fullUrl = buildUrl(data.url);
+
+      const { blurhash, blurDataURL } =
+          await blurhashService.generateBlurhash(fullUrl, { withDataURL: true });
+
+      data.blurhash = blurhash;
+      data.blurDataURL = blurDataURL;
+      return;
+    }
+
+    // ------------------------
+    // UPDATE
+    // ------------------------
+    if (eventType !== 'beforeUpdate') return;
+
+    const regenerateOnUpdate =
+        strapi.plugin('strapi-blurhash').config('regenerateOnUpdate');
+    const forceRegenerateOnUpdate =
+        strapi.plugin('strapi-blurhash').config('forceRegenerateOnUpdate');
+
+    const existing = await strapi.db
+        .query('plugin::upload.file')
+        .findOne({
+          select: ['url', 'blurhash', 'mime'],
+          where,
+        });
+
+    if (
+        !existing ||
+        !isImage(existing.mime) ||
+        (!forceRegenerateOnUpdate &&
+            existing.blurhash &&
+            !regenerateOnUpdate)
+    ) {
+      return;
+    }
+
+    const fullUrl = buildUrl(existing.url);
+
+    const { blurhash, blurDataURL } =
+        await blurhashService.generateBlurhash(fullUrl, { withDataURL: true });
+
+    data.blurhash = blurhash;
+    data.blurDataURL = blurDataURL;
+  };
+
+  strapi.db.lifecycles.subscribe({
+    models: ['plugin::upload.file'],
+    beforeCreate: (event) => handleBlurhash(event, 'beforeCreate'),
+    beforeUpdate: (event) => handleBlurhash(event, 'beforeUpdate'),
+  });
+};

package/server/config.js

@@ -0,0 +1,16 @@
+'use strict';
+
+module.exports = {
+    default: ({ env }) => ({ 
+        regenerateOnUpdate: false,
+        forceRegenerateOnUpdate: false,
+    }),
+    validator: (config) => {
+        if (typeof config.regenerateOnUpdate !== 'boolean') {
+            throw new Error('regenerateOnUpdate has to be a boolean');
+        }
+        if (typeof config.forceRegenerateOnUpdate !== 'boolean') {
+            throw new Error('forceRegenerateOnUpdate has to be a boolean');
+        }
+    },
+};

package/server/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const register = require('./register');
+const bootstrap = require('./bootstrap');
+const services = require('./services');
+const config = require('./config');
+
+module.exports = {
+  register,
+  bootstrap,
+  services,
+  config,
+};

package/server/register.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = ({ strapi }) => {
+  strapi.plugin('upload').contentTypes.file.attributes.blurhash = {
+    type: 'text',
+  };
+  strapi.plugin('upload').contentTypes.file.attributes.blurDataURL = {
+    type: 'text',
+  };
+};

package/server/services/blurhash.js

@@ -0,0 +1,92 @@
+const { encode, decode } = require('blurhash');
+const webp = require('webp-wasm');
+const { createCanvas, loadImage } = require('canvas');
+
+const BLURHASH_COMPONENTS = 4;
+const PLACEHOLDER_SIZE = 16;
+
+module.exports = ({ strapi }) => ({
+  async generateBlurhash(url, { withDataURL = false } = {}) {
+    try {
+      const buffer = await fetchImage(url);
+      const imageData = await decodeImage(buffer, url);
+
+      const blurhash = encode(
+          imageData.data,
+          imageData.width,
+          imageData.height,
+          BLURHASH_COMPONENTS,
+          BLURHASH_COMPONENTS
+      );
+
+      if (!withDataURL) return blurhash;
+
+      const blurDataURL = blurhashToDataURL(
+          blurhash,
+          imageData.width,
+          imageData.height
+      );
+
+      return { blurhash, blurDataURL };
+    } catch (error) {
+      strapi.log.error(`[blurhash] ${error.message}`);
+      throw error;
+    }
+  },
+});
+
+/* ----------------------------- */
+/* Helpers                       */
+/* ----------------------------- */
+
+async function fetchImage(url) {
+  const fetchModule = await import('node-fetch');
+  const fetch = fetchModule.default;
+
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.statusText}`);
+  }
+
+  return Buffer.from(await response.arrayBuffer());
+}
+
+async function decodeImage(buffer, url) {
+  if (url.endsWith('.webp')) {
+    const decoded = await webp.decode(buffer);
+    return {
+      width: decoded.width,
+      height: decoded.height,
+      data: Buffer.from(decoded.data),
+    };
+  }
+
+  const img = await loadImage(buffer);
+  const canvas = createCanvas(img.width, img.height);
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+
+  const imgData = ctx.getImageData(0, 0, img.width, img.height);
+  return {
+    width: imgData.width,
+    height: imgData.height,
+    data: Buffer.from(imgData.data),
+  };
+}
+
+function blurhashToDataURL(blurhash, width, height) {
+  const aspectRatio = width / height;
+  const h = PLACEHOLDER_SIZE;
+  const w = Math.max(1, Math.round(h * aspectRatio));
+
+  const pixels = decode(blurhash, w, h);
+  const canvas = createCanvas(w, h);
+  const ctx = canvas.getContext('2d');
+
+  const imageData = ctx.createImageData(w, h);
+  imageData.data.set(pixels);
+  ctx.putImageData(imageData, 0, 0);
+
+  // WebP = much smaller than PNG
+  return canvas.toDataURL('image/webp', 0.6);
+}

package/server/services/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+const blurhash = require('./blurhash');
+
+module.exports = {
+  blurhash,
+};

package/strapi-server.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./server');