画像から色を抽出し枠などに使える『Colorify.js』の使い方

9 years ago

今回は, phpspot さんの画像の特徴色をJSで抽出できる「Colorify.js」:phpspot開発日誌で紹介されていた Colorify.js について解説したいと思います.

サイトに写真を貼る際, 枠の色に迷うことってありますよね？私も大抵悩んでも, 白とか淡い色に落ち着きます.

そこで今回紹介したいのが Colorify.js です. これを使えば画像の特徴色を抽出して枠に適応させることができます.

ページのちょっとしたアクセントとして導入してみてはどうでしょう？

『Colorify.js』とは？

JavaScript だけで, 画像の特徴色を抽出し背景などに適応させることができるスクリプトです.

『Colorify.js』デモ

下記がデモになります. 画像の特徴色に合った枠が表示されているのがわかるかと思います.

Download

『Colorify.js』の使い方

Install

<link rel='stylesheet' href='http://cdn.rawgit.com/LukyVj/Colorify.js/v1.0.1/styles/colorify.css' />  
<script src='http://cdn.rawgit.com/LukyVj/Colorify.js/v1.0.1/scripts/colorify.min.js'></script>

Usage

html

まず, html 側で画像を読み込みます.

<div class='demo' colorify-gradient-color>  
  <img class='colorify' src='images/phinajs.png' />
  <img class='colorify' src='images/tomapiko.png' />
  <img class='colorify' src='images/fly.png' />
  <img class='colorify' src='images/fire.png' />
</div>

対象となる要素に colorify-gradient-color という属性を追加しています. この文字列は何でも良いのですが, js から参照するキーとなるのでわかりやすい名前にしましょう.

そして, colorify を適応させたい img 要素に colorify クラスを付けます. これで html 側のセットアップは完了です.

js

次に js 側を書いていきます.

colorify() というメソッドを実行するだけです.

container には先程 html で指定した属性名を指定します.

他にも様々なオプションを指定することができます.

多すぎてここでは詳しく触れませんが, 詳しく知りたいという方は公式サイトを参照下さい.

window.onload = function() {  
  colorify({
    container: 'colorify-gradient-color',
    accuracy: 10,
    gradient: true,
    gradientDirection: 'to bottom right'
  });
};

css

これで画像から色を抽出して枠を表示してくれます. ただこのままだとちょっと見た目が変になるので CSS で調整します.

.image-container {
  display: inline-block;
  margin: 4px;
}

.image-container img.colorify {
  float: left;
  height: 200px;
}

これでキレイに表示されるのが分かるかと思います.

注意点として, 内部で canvas の getImageData() を使っているようなのでクロスドメインで参照している画像の場合警告が出て上手く動きません. ちゃんと自分の画像を使うようにしましょう♪