PHP GDを利用して画像の色抽出をしてみましょう

こんにちは。

前回の記事ではImageMagickを使ってgifアニメを生成しましたが、今回は生成ではなく抽出を行ないます。PHPにおけるGDライブラリの利用方法について詳しくはこちら。

画像の一部分の色を取りたいよね

imagecoloratという便利な関数がもう既にあったりします。これはピクセルを指定すると画像内のその座標のRGB情報を格納した配列を受け取れる関数です。

取り急ぎ下記のような関数に組みます。

function pickColor($gd_obj, $x, $y){
    $rgb = imagecolorat($gd_obj, $x, $y);
    $array['red'] = ($rgb >> 16) & 0xFF;
    $array['green'] = ($rgb >> 8) & 0xFF;
    $array['blue'] = $rgb & 0xFF;
    return $array;
}

function pickColor($gd_obj, $x, $y){

$rgb = imagecolorat($gd_obj, $x, $y);

$array['red'] = ($rgb >> 16) & 0xFF;

$array['green'] = ($rgb >> 8) & 0xFF;

$array['blue'] = $rgb & 0xFF;

return $array;

}

Array
(
    [red] => 152
    [green] => 156
    [blue] => 152
)

Array

(

[red] => 152

[green] => 156

[blue] => 152

)

こんな値が返ってきます。

どんな使い方ができるか

例えば「画像のど真ん中の座標の色情報が取りたい」等の明確な利用方法があるならいいのですが、「画像全体の色情報をなんとなく全部取りたい」時は少し使いづらいです。今回はももさんの画像の全体の色情報をなんとなく全部取りたいです。

取ったらその色の四角い文字をタイル状で表示したいです。ついでに色情報へのリンクを繋げてみます。先にプログラム全体でございます。

header("Content-Type: text/html; charset=utf-8");
$number = 50;

$original_image = imagecreatefromstring(file_get_contents('./momo.png'));
$pick_image = imagecreatetruecolor($number, $number);

imagecopyresampled($pick_image, $original_image, 0, 0, 0, 0, $number, $number, imagesx($original_image), imagesx($original_image));

echo '<p style="font-size:xx-small; line-height:90%; letter-spacing:-0.1em">';

for($y=0; $y<$number; $y++){
    for($x=0; $x<$number; $x++){
        $rgb = pickColor($pick_image, $x, $y);
        echo '<a target="_blank" style="text-decoration:none;" href="http://www.kitaq.net/lib/rgb/10to16.cgi?r='.$rgb['red'].'&g='.$rgb['green'].'&b='.$rgb['blue'].'"><span style="color: rgb('.$rgb['red'].','.$rgb['green'].','.$rgb['blue'].');">■</span></a>';
    }
    echo '<br>';
}

header("Content-Type: text/html; charset=utf-8");

$number = 50;

$original_image = imagecreatefromstring(file_get_contents('./momo.png'));

$pick_image = imagecreatetruecolor($number, $number);

imagecopyresampled($pick_image, $original_image, 0, 0, 0, 0, $number, $number, imagesx($original_image), imagesx($original_image));

echo '<p style="font-size:xx-small; line-height:90%; letter-spacing:-0.1em">';

for($y=0; $y<$number; $y++){

for($x=0; $x<$number; $x++){

$rgb = pickColor($pick_image, $x, $y);

echo '<a target="_blank" style="text-decoration:none;" href="http://www.kitaq.net/lib/rgb/10to16.cgi?r='.$rgb['red'].'&g='.$rgb['green'].'&b='.$rgb['blue'].'"><span style="color: rgb('.$rgb['red'].','.$rgb['green'].','.$rgb['blue'].');">■</span></a>';

}

echo '<br>';

}

まず2〜7行目でももさんの画像を50×50ピクセルにリサイズします。

8行目はcssで記載されていれば問題ないとは思いますが、四角い文字をタイル状で表示する際の行間や文字幅を設定します。

11行目以降のfor関数内で50×50ピクセルの画像の色情報を抽出していき、その情報をHTMLタグに差し込んでいきます。19行目では勝手ながらこちらの色情報サイトさんのURLを指定しております。

実行！

実行結果がこれです。

クリックしたりソースを見ていただければわかりますが、画像ではなく全て色つきの四角文字です。文字を丸にしたりもできます。

何か利用できないかなって考えているところです(゜-゜)

2015/05/29 PHP GDとSkyBiometryAPIを使って顔座標を浮かしてみましょう	2015/03/11 ■バックエンドパフォーマンス【PHP/Framework別】
2015/06/19 tmhOAuthで画像付きつぶやきをする方法	2015/12/06 ImageMagickとFFmpegを利用してgifアニメとmp4動画を生成してみましょう

PHP GDを利用して画像の色抽出をしてみましょう

画像の一部分の色を取りたいよね

どんな使い方ができるか

実行！

関連記事