クラウド導入・監視運用からシステム開発まで、WestWindに全ておまかせください

ブログ

ホーム > ブログ

2017年10月20日

PHPのImageMagickを使う使ってヒートマップを作る

執筆者:椿宏太郎

ヒートマップとは、下記のイメージの様にデータの分布を可視化する手段です。


手順としては、下記の通りです。

1.元画像のデータサイズを取得して同じサイズの空画像を作る
2.空画像にポイント画像を座標データに合わせて重ねる

3.出来上がった画像にカラーマップで色を付ける

出来上がりはこんな感じ


4.元画像に透過率50%でデータを重ねて出来上がりです。
サンプルをクリックしてください


サンプルソース


/* ポイント情報 */
$pos = array(
    array(343,147),
    array(339,185),
    array(364,195),
    array(324,173),
    array(337,181),
    array(341,185),
    array(309,162),
    array(348,183),
    array(342,170),
    array(334,177),
    array(349,205),
    array(333,171),
    array(337,165),
    array(326,227),
    array(319,210),
    array(330,204),
    array(309,211),
    array(333,198),
);

/* 元画像のサイズ取得と読み込み */
list($w, $h) = getimagesize('img/main.png');
$image = new Imagick('img/main.png');

/* ヒートマップ画像の生成 */
$temp = new Imagick();
$temp->newImage($w, $h, 'white');
$temp->setImageFormat("png");

/* ポイントを塗り潰す50x50の画像 */
$point = new Imagick('img/point.png');
/* 画像の透過度を上げるともっと多くのデータに対応可能(さらに上げるなら、画像サイズを小さくする)*/
$point->evaluateImage(Imagick::EVALUATE_MULTIPLY, 1.0, Imagick::CHANNEL_ALPHA);

/* ポイント数分ポイント画像を重ね合わせる */
foreach($pos as $val) {
    /* 座標から画像の半分のサイズを削除(座標を中心として画像を貼り付ける) */
    $x = $val[0] - 25;
    $y = $val[1] - 25;
    /* 画像の重ね合わせ */
    $temp->compositeImage($point, $point->getImageCompose(), $x, $y);
}

/* 色変換テーブル画像の読み込み */
$clut = new Imagick('img/clut.png');
/* 画像をカラフルに変換する */
$temp->clutImage($clut);

/* ヒートマップ画像を半透明にする */
$temp->setImageOpacity(0.5);

/* 元画像にヒートマップ画像を重ね合わせる */
$image->compositeImage($temp, $temp->getImageCompose(), 0, 0);

/* 画像を出力 */
header("Content-Type: image/png");     //表示する画像ヘッダー
echo $image;

$image->clear();  

カテゴリ