Photosynthesic blog

夫婦でやってるWeb屋です。

2018-10-16

サムネイルの画像から色を取得して表示 :Vue.setとrgbaster.js

こんにちは、みみです。

WP REST API と私とVueとシリーズ?第三弾として、画像から色を取得して表示するのをやってみました。

といっても、そもそもは、Vueで記事取得するだけだとつまらないので、5月の時にやってみてたものです。html上でやるにはサラッと出来たのですが、別ファイル化する際に変に回り道をしてしまって、やっとこまとまりました。出来てみればなんてことないコードなのですが。

色を取得できるライブラリはいくつかありますが、私が気に入ったのは

briangonzalez/rgbaster.js: ? A simple library for extracting dominant colors from images.

イメージソースは img url でもオブジェクトでもOKで、素のJavaScriptなのがポイント。

これを使って、WP REST API の img url から色を取得してオブジェクトにして入れてVueで出す、っていうだけのものです。動いているデモはこのサイトのトップ。

vm.posts に axios などで取得したAPIのデータを入れる前提です。Vueとrgbasterを読み込むのも忘れずに。

肝は、imgUrlにサムネイル画像を指定(._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_urlっていうめっちゃ深いところにある)してあげるところと、リアクティブのためにVue.setを使うところ。最初、 push を使ってしまって躓いたところです。Vueのリアクティブの難しいことはここに書いてあります。取り敢えずsetを使えば救われます()。

サムネイル画像指定するの当たり前だろと今なら思うのですが、何にも考えずに元ファイル指定していてめっちゃ時間がかかって慌てたのは内緒。ちゃんと設計せずに行き当たりばったりにコードを書いてはいけないという教訓でした(デジャヴ?)。

ホントは値を返すようにしたかったのだけれど、RGBasterの非同期を待つ処理が分からず。asyncで受け取れると思ったのだけど、上手くいかなかった…。

結果、仕上がったものがあんまりおもしろくないので、もうひと工夫したいなあと思っています。

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter