やりたいこと

サーバーサイド Canvas を使用して、画像から色情報を抽出したい!

node-canvas をインストールします

node.js で canvas を使うとなるとおそらく以下のモジュールがメジャーなんじゃないかなーと思います。

また、実際にプロダクトで使用していますが、とくに font や日本語の問題など特に発生していないので、まったく問題ないかと思います。

Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS.

Windows

ぼくは普段 Windows を使っているので、 Chocolatey 経由でインストールしました。

Mac と比べると少し面倒な手順でした。

Installation: Windows · Automattic/node-canvas Wiki

Ubuntu and other Debian based systems

docker イメージの FROM node:8 で使う場合は、 Debian になるので、以下を見ながらインストールしました。

Installation: Ubuntu and other Debian based systems · Automattic/node-canvas Wiki

サンプルコード

node-canvas を使ったサンプルコードは以下に置いておきました。

hisasann/node-generate-image: generate image with node-canvas in node.js

画像から色情報を抽出します

color-thief モジュールを使います

Dominant ColorPalette 情報を取得できるライブラリ、 Color Thief が楽でよかったです。

ドミナントカラー(dominant color):色彩検定ガイド~色彩コーディネーターの資格~

ただし、そのままではブラウザ(DOM)に依存したコードがあり、サーバーサイドで使うとエラーになってしまうので、サーバーサイドで使えるものを選ぶ必要があります。

lokesh/color-thief: Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas.

doda/node-color-thief: Grabs the dominant color or a representative color palette from an image. Uses javascript and canvas.

などあったのでですが、うまく動かず、最終的に、

jeanmatthieud/color-thief-jimp: Grabs the dominant color or a representative color palette from an image with node. Uses javascript and jimp.

こちらを使用しました。

なので、 dependencies 的には、

  "dependencies": {
    "canvas": "next",
    "color-thief-jimp": "^2.0.2",
    "jimp": "^0.2.28",
  },

こんな感じになりました!

使い方

すごく簡単に RGB を抽出できました!

RGB を HSV 色空間に変換して、 Hue 値を取得します

HSV とは、色を 色相(Hue) 彩度(Saturation) 明度(Value・Brightness) の3要素で表現する方式です。

RGBとHSV・HSBの相互変換ツールと変換計算式 - PEKO STEP

HSV色空間とは : PEKO STEP

Hue の値(0°~360°の範囲の値)を見ると、色相上どのあたりの色なのか把握することができます。

なので、割と色認識するときに使い勝手がよかったりします。

RGB to HSV をしてくれるコードは以下のを使わせていただきました。

JavaScriptでRGBをHSVに変換する方法

あとがき

なんとなくサーバーサイドで Canvas を使うのは、敷居が高いのかなーと思っていたのですが、すでに多くの OSS があるおかげで比較的に楽に実装可能でした。

ではでは!

読んだ記事

Node.jsでCanvas(ImageData)を使った簡単な画像処理 - Qiita

Node.jsで任意のサイズの画像を生成するスクリプトを書いた - 30歳からのプログラミング

numb86/generate-image-file: You can generate image file of any size and byte.

Bluemix + Node-Canvas で日本語を表示する : まだプログラマーですが何か?