JavaScriptで画像から色を取り出す

2014-02-05 /Development #JavaScript 2 users

この記事は最終更新日から11年以上経過しています。

前回の記事のドロネー三角形分割のスクリプトが気に入ったのでブログのヘッダに使ってみました。

単に画面上に置くだけでも良かったのですが、記事に合う色合いになったら良いなーと思ったので、ページ毎に使っている画像から色を取得して描画するようにしてみました。

Wordpressは簡単な設定でアイキャッチ画像を設定できるので、それを使用して画像を投稿しています。テンプレートにはwp_get_attachment_image_srcとget_post_thumbnail_idを使用してパスだけを読み込むように設定しておいて、それをjsに渡し、js内で画像をロードし、非表示のまま画像から色だけを取り出して、それをcanvasに描画する時に使っています。

で、画像から色をとるのがASみたいに簡単にできなくて、ちょっと回りくどい方法になってしまったのでメモ。

まずは見えないcanvasを作成して、

コピーしました
canvas_hidden.id = 'canvas_hidden';
canvas_hidden.width = plugin.settings.stage.width;
canvas_hidden.height = plugin.settings.stage.height;
ctx_hidden = canvas_hidden.getContext('2d');

画像のロード後に見えないcanvasに一旦貼付けてそこからgetImageDataを使用して色を取り出し、配列に格納します。

コピーしました
ctx_hidden.drawImage(img, 0, 0, plugin.settings.stage.width, plugin.settings.stage.height);
data = ctx_hidden.getImageData(0, 0, plugin.settings.stage.width, plugin.settings.stage.height).data;
for (i = 0; i < data.length; i+=4) {
  p = 'rgb('+data[i]+','+data[i+1]+','+data[i+2]+')';
  colors.push(p);
}
for (i = 0; i < plugin.settings.stage.width; i++) {
  ar = [];
  for (j = 0; j < plugin.settings.stage.height; j++) {
    col = j*plugin.settings.stage.width;
    ar.push(colors[col + i]);
  }
  colorsXY.push(ar);
}

で、毎フレームの処理で、先ほどの配列から色を取り出します。

コピーしました
for (i = 0; i < triangles.length; i++) {
  posx = parseInt(Static.getTriangleCenter(triangles[i]).x);
  posy = parseInt(Static.getTriangleCenter(triangles[i]).y);
  fillTriangle(ctx, triangles[i], colorsXY[posx][posy]);
}

毎フレームの処理で画像から色を取得してしまうと激重になってしまうので注意が必要です。

色が華やかになってきた事だしそろそろ当初の予定通り撮ってきた写真とかをアップする気楽なブログとしても活用していこう・・・