サーバーサイドnode.jsでCanvasを使い色情報を抽出する

やりたいこと

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

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

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

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

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

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

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

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

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

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

こちらを使用しました。

なので、 dependencies 的には、

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

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

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

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

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

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

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

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

ではでは！