Node.js で画像から特徴的な色を抽出するアレ系の処理について

古くはインタラクティブなアートなどでよく行われていたものに、画像から特徴的な色を抽出して表現に使うという処理があります。Flash 系のサイトでもいくつか見てきた気がします (が、具体的なコンテンツを思い出せません...)

僕が知っているこういうタイプの処理が行われた一般的なプロダクトに iTunes のアートワーク機能があります。2012年の iTunes 11 にてアルバムのジャケットからアートワークを自動生成するという機能が入り、当時いろいろな人がその仕組みについて話題として取り上げました。

• Panic Blog » iTunes 11 and Colors

さて、時代は変わって 2019 年。こういった仕組み、つまり画像などから特徴的な色を取り出し、デザインなどに反映させる場合、Node.js をベースに考えるとどういったことをすればいいでしょうか。

手っ取り早いのはライブラリを探すことです。既存のライブラリで出来ないケースにあたった場合、徐々に自分自身で実装をしていけばいいと思います。Node.js には、画像から特徴的な色を抽出するライブラリがいくつかあります。ただしいくつかのライブラリでは数年更新が行われていないものも複数存在します。

現在も更新されており、なおかつ簡単に使え、しかも拡張しようと思ったら結構カスタマイズが可能なライブラリとして、node-vibrant を紹介します。

• akfish/node-vibrant: Extract prominent colors from an image

node-vibrant は TypeScript で書かれているため、型定義を見ることで使い方がよくわかります。node-vibrant では、画像が持つ Vibrant な色と Muted な色を抽出することが出来ます。Vibrant というのは、画像の中にある鮮やかな色で、Muted は、逆に落ち着いた色という認識です。

デフォルトでは、

• Vibrant
• DarkVibrant
• LightVibrant
• Muted
• DarkMuted
• LightMuted

の6種類が抽出されます。GitHub には、より詳細な抽出を行うための API 仕様が書かれています。

自分でも試してみて、結果のサンプルコードを GitHub のリポジトリに挙げました。

• karad/image-palette-sample: Make color palette from image.

node-vibrant を試す

まず空の Node.js プロジェクトを用意し、必要なライブラリをインストールします。

$ npm i node-vibrant

今回は、取り出した値を css の 16 進数の色コードに変換するので、rgb-hex も利用します。node-vibrant にも同様のユーティリティがあったのですが、どうもちょっと試した感じだと機能しなかったので宿題とします。

利用方法は、サンプルコードを見てみたほうが早そうなので、掲載します。

const fs = require('fs');
const NodeVibrant = require('node-vibrant');
const rgbHex = require('rgb-hex');

/**
 * Pick up palette from image
 * @param {string} img_path 
 */
const pickPalette = async (img_path) => {
    const palettes = await NodeVibrant.from(img_path, {
        // options here
    }).getPalette()

    return Object.getOwnPropertyNames(palettes).map((palette) => {
        return {name: palette, value: rgbToHex(palettes[palette]._rgb)}
    })
}

/**
 * rgb to hex
 * @param {string} rgb_arr 
 */
const rgbToHex = (rgb_arr) => {
    const [r, g, b] = rgb_arr;
    return '#' + rgbHex(r, g, b);
}

const main = async () => {
    // Read args
    const [node, js, ...args] = process.argv
    if(args.length > 0) {
        const result = await pickPalette(args[0])
        console.log(result)
    } else {
        console.log('to use `npm run palette <IMAGE_PATH>`')
    }
}

main()

GitHub にリポジトリとしてサンプルコードを公開しましたので、興味ある方は見てください。

参考

• karad/image-palette-sample: Make color palette from image.