デザインで配色に悩む時、お洒落な鳥
を眺めています。
その際に色を抽出できるとより参考になると考え、画像からカラーパレット生成に取り組んでみました。
使用技術
- Vite : ホットリロードやビルドがとにかく速く開発が快適になる。
- Vue3 : Vue2からTypeScriptサポート充実したので開発しやすくなっている。
- Firebase : ちょっとしたアプリ開発にもDBやサーバーレス関数など組み合わせられる。無料枠もあり非常にありがたい。
- extract-colors : 今回の主役。画像からカラーパレット生成してくれる。
extract-colorsを使ってみる
今回の主旨である「画像からカラーパレット生成」をやってくれます。
READMEを参照しながらインストールします。
npm install --save extract-colors canvas
ブラウザ向けはextract-colorsのみのインストールが案内されていますが、私のVite環境ではcanvasも必要でした。
使い方はシンプルでファイルへのパスやImageDataを渡すと、抽出された色が配列で得られます。
import extractColors from 'extract-colors'
const src = 'my-image.jpg'
extractColors(src)
.then((colors) => colors.forEach(console.log))
.catch(console.error)
拙いですが型定義など加えて関数化したものです。
import { extractColors } from "extract-colors";
export interface Color {
hex: string;
red: number;
green: number;
blue: number;
area: number;
saturation: number;
};
export const getImageColorAsync = async (
filePath: string
): Promise<Color[]> => {
try {
const options = {
pixels: 10000,
distance: 0.2,
saturationImportance: 0.2,
splitPower: 10,
colorValidator: (red: number, green: number, blue: number, alpha = 255) =>
alpha > 250,
};
const colors = await extractColors(filePath, options);
return colors;
} catch (error) {
console.warn(error);
throw error;
}
};
余談ですがget-image-colorsという似たようなものもあります。
こちらはrequire()でのモジュールロードのみとなるのでご注意ください。
Firebaseを連携させる
画像とカラーパレットの情報を保存できるようにします。
今回はFirebaseの提供するサービスのうち、FirestoreとStorageを使用しました。
- Cloud Firestore : NoSQLデータベース。キー・バリュー形式でデータ格納する。サポートされるデータ型は要確認。
- Cloud Storage for Firebase : 画像、音声、動画、またはその他のユーザーが生成したコンテンツなどの保管に向いているバケット。
画像をStorageに保存して、画像パスとカラーパレットをFirestoreに保存する構成にしています。
Firestoreから得られるデータにTypeScriptを適用するためにFirestoreDataConverterを加えると良いです。
また、timestampを加える際は、firestoreモジュールで提供されているものを使うとソート時の考慮が多少減るかと思います。
firebase.firestore.Timestamp
import { Timestamp } from "firebase/firestore";
const timestamp = Timestamp.now()
まとめ
画像からカラーパレット生成のコア機能ができたので、chrome拡張と組み合わせて閲覧しているWebサイトのカラーパレット抽出など妄想膨らみますね...
ちなみにAdobe Colorというサイトで画像のテーマカラー抽出ができるので気になった方はそちら試してみてください。