sitePagesサンプルページLinksTwitterGithubRss検索:JavaScriptで画像から色を取り出す前回の記事のドロネー三角形分割のスクリプトが気に入ったのでブログのヘッダに使ってみました。画面上に置くだけでも良かったのですが、記事に合う色合いになったら良いなーと思ったので、ページ毎に使っている画像から色を取得して描画するようにしてみました。WordPressは簡単な設定でアイキャッチ画像を設定できるので、それを使用して画像を投稿しています。テンプレートにはwp_get_attachment_image_srcとget_post_thumbnail_idを使用してパスだけを読み込むように設定しておいて、それをjsに渡し、js内で画像をロードし、非表示のまま画像から色だけを取り出して、それをcanvasに描画する時に使っています。画像から色をとるのがASみたいに簡単にできなくて、ちょっと回りくどい方法になってしまったのでメモ。画像のロード後に見えないcanvasに一旦貼付けてそこからgetImageDataを使用して色を取り出し、配列に格納します。毎フレームの処理で、先ほどの配列から色を取り出します。毎フレームの処理で画像から色を取得してしまうと激重になってしまうので注意が必要です。