PHPで画像に使われている色を分析して抽出を簡単に行えるライブラリ

画像を分析して、その画像に使われている色を抽出するライブラリです。画像に利用されている色を平均化してリスト化します。また色の利用頻度も同時に得ることが出来ます。

colors.inc.php を使って画像の色を抽出する

まずは、ライブラリのダウンロード

GitHubからダウンロードして、その中にあるcolors.inc.phpのみ使います。

DEMO 表示

index.phpを作成し以下のコードを書く

include_once("colors.inc.php");
$ex=new GetMostCommonColors(); 
$ex->image="img/00006.jpg"; 
$colors=$ex->Get_Color();

includeでダウンロードしてきた、ファイルを読み込みます。その後に image=の所に画像のパスを指定すれば、これで画像からの色の抽出が出来ます。$colorsに配列で、キーに色の情報、値に色の頻出が入っています

$colorsの中身を確認するには

include_once("colors.inc.php");
$ex=new GetMostCommonColors(); 
$ex->image="img/00006.jpg"; 
$colors=$ex->Get_Color(); 

echo "<pre>";
var_dump($colors);
echo "</pre>";

var_dump で配列の中身をブラウザに表示します。

HTMLで出力する

include_once("colors.inc.php");
$ex=new GetMostCommonColors(); 
$ex->image="img/00006.jpg"; 
$colors=$ex->Get_Color(); 

echo "<img src='img/00006.jpg'>";
foreach ($colors as $key => $value) {
 echo "<p style='background: #$key;'>#$key</p>";
}

取得した色の情報をHTMLに全て出力します。

foreach を使って全ての配列のキーの値を取り出してHTMLに整えて表示させています

CSSで整える

<style>
 body {
 margin: 0;
 }
 
 p {
 display: block;
 width: 50px;
 height: 50px;
 float: left;
 margin: 0;
 padding: 0;
 font-size: 12px;
 text-align: center;
 line-height: 50px;
 color: #fff;
 }
 
 img {
 display: block;
 margin: 10px auto;
 }
</style>

出力したものを見やすい様にCSSで少し整えました。

これで、やることは全て終わりました。今回は、HTMLで出力して色を視覚的にわかりやすく表示するというところまで行いました。このライブラリの機能自体は、最初の方の$colorsに情報を入れた時点で完了しています。あとは使い方次第で、今回は色を表示しましたが。

例えば、データベースに画像のデータの情報の一部として、頻出が多い色 3色を記録しておいて。画像の絞り込みの時に、色での絞り込みに利用するなどが考えられます。完全に一致する色でフィルタリングするのは難しいので、色の範囲を作って絞り込みするような仕組みにすると実用的になるかと思います。

フォトストック系のサイトで、色で絞込できるような機能があるのはこういったものを使って実装していると考えられますね。

サンプルコード全体

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>demo</title>
 <style>
 body {
 margin: 0;
 }

 p {
 display: block;
 width: 50px;
 height: 50px;
 float: left;
 margin: 0;
 padding: 0;
 font-size: 12px;
 text-align: center;
 line-height: 50px;
 color: #fff;
 }

 img {
 display: block;
 margin: 10px auto;
 }
 </style>
</head>
<body>
 <?php
include_once("colors.inc.php");
$ex=new GetMostCommonColors(); 
$ex->image="img/00006.jpg"; 
$colors=$ex->Get_Color(); 

echo "<img src='img/00006.jpg'>";
foreach ($colors as $key => $value) {
 echo "<p style='background: #$key;'>#$key</p>";
}

 ?>
</body>
</html>

こちらはデモサイトのPHPファイルの中身です、全体をまとめるとこのようになります、こちらのコードはご自由にご利用ください。