🎨 Strapi Plugin: Image Color Palette

This plugin generates a color palette and dominant color for images uploaded to Strapi. It uses GraphicsMagick to extract the colors from the image after it's uploaded, and stores them in the database schema. When queried, it looks like this:

1
2
3
4
5
6
...
colors: {
  dominant: "#534f70",
  palette: [ "#042d65", "#43374b", "#f96597", "#77c6ff", "#e1e203" ]
}
...

This can be useful for adding color accents, or for using the colors as a placeholder while the image is loading.

Photo by Thomas McPherson on Unsplash

Supported Formats

This plugin supports most major image formats.

It also now supports SVG files but due to some limitations, it will attach the full palette regardless of what is set as the paletteSize. The dominant color will be set to the first color in this array, so it won't always be accurate.

Requirements

This plugin is for Strapi v4.

You'll also need to have GraphicsMagick installed on your system. You can install it with Homebrew on macOS with the following command:

brew install graphicsmagick

Heroku

On Heroku, you'll need to add the GraphicsMagick buildpack to your app.

Installation

1. Install the plugin via Yarn:

   yarn add @studio123/strapi-plugin-image-color-palette

2. Append the following to your Strapi plugin config file (config/plugins.js) and adjust as needed:

   1
   2
   3
   4
   5
   6
   7
   "image-color-palette": {
       enabled: true,
       config: {
           format: "rgb",
           paletteSize: 4,
       }
   }

3. Restart your Strapi server.

Configuration

The plugin offers the following configuration options:

Format Examples

The plugin can return the colors in the following formats:

1
2
3
4
    raw: { r: 255, g: 255, b: 255 },
    hex: '#ffffff',
    rgb: 'rgb(255, 255, 255)',
    hsl: 'hsl(0, 0%, 100%)',

Migration

To add color palette data to existing images, you'll need to add the following script to the ./database/migrations folder in your Strapi project. You can name it anything you want, but it's recommended to use a timestamp as the prefix. It will run automatically when you start your Strapi server, so be sure to backup your database before running it.

Important: Make sure you start Strapi after installation so that the database schema is updated with the new colors column. Then, you can add the migration script and start Strapi again.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
'use strict';

const FILES_TABLE = 'files'; // Change this if you're using a custom table name
const BATCH_SIZE = 1000; // Batch size for querying the database

async function up(trx) {
    let lastId = 0;

    while (true) {
        const files = await trx
            .select(['id', 'url', 'mime'])
            .from(FILES_TABLE)
            .whereNot('url', null)
            .andWhereLike('mime', 'image/%')
            .andWhere('colors', null)
            .andWhere('id', '>', lastId)
            .orderBy('id', 'asc')
            .limit(BATCH_SIZE);

        for (const file of files) {
            const colorPalette = await strapi
                .plugin('image-color-palette')
                .service('image-color-palette')
                .generate(file.url, file.mime);

            if (colorPalette) {
                await trx
                    .update('colors', colorPalette)
                    .from(FILES_TABLE)
                    .where('id', file.id)
                    .catch(err => {
                        strapi.log.warn(
                            `Error adding or updating color data for file ${file.id}: ${err}`,
                        );
                    })
                    .then(() => {
                        strapi.log.info(`Added color data to file ${file.id} successfully.`);
                    });
            } else {
                strapi.log.warn(`Could not generate color data for file ${file.id}.`);
            }
        }

        if (files.length < BATCH_SIZE) {
            break;
        }

        lastId = files[files.length - 1].id;
    }
}

async function down() {}

module.exports = { up, down };

Contributing

To contribute to this plugin, please open an issue or submit a pull request.