1. 製品
  2.   画像
  3.   JavaScript
  4.   Color Thief
 
  

画像処理用のオープンソース JavaScript ライブラリ

画像からカラー パレットを取得するための JavaScript API。

カラーシーフとは？

Color Thief は、ソフトウェア開発者が JavaScript を使用して画像から色を取得できるようにする、非常にシンプルで軽量な画像処理ライブラリです。これは純粋な JavaScript ライブラリであり、外部依存関係がなくても Node 上でもブラウザー内でも動作します。 API は画像からドミナント カラーを取得します。色は、赤、緑、青の値を表す 3 つの整数の配列として返されます。ブラウザで作業している間は処理に HTML 画像を使用する必要があり、Node を使用している間は画像の URL を使用する必要があります。

Color Thief パッケージには、さまざまな環境とビルド プロセスをサポートする複数の配布ファイルが含まれています。 color-thief.js は画像を処理するためのメイン ファイルです。color-thief.mjs は最新のブラウザー、Webpack およびロールアップに使用され、color-thief.umd.js は単純なスクリプト タグの読み込みに使用されます。

Previous Next

カラーシーフ入門

NPM 経由で Color Thief をインストールするための推奨される方法。以下のコマンドでインストールしてください。

NPM 経由で Color Thief をインストールする

 npm i --save colorthief

無料の JavaScript API を使用して画像から色を取得する

オープンソースの Color Thief ライブラリを使用すると、JavaScript 開発者はプログラムで画像から色を抽出できます。画像からドミナント カラーを取得するために、API は getColor() メソッドを提供します。このメソッドは、画像からドミナント カラーを取得します。色は、赤、緑、青 (RGB) の値を表す 3 つの整数の配列として返されます。次の 2 行のコードを使用すると、イメージからドミナント カラーを簡単に取得できます。

画像からドミナント カラーを取得

  1. 画像を読み込む
  2. 色を取得する

Node.js で画像から色を抽出する

const img = resolve(process.cwd(), 'rainbow.png');
ColorThief.getColor(img)
.then(color => { console.log(color) })
.catch(err => { console.log(err) })

無料の JavaScript API を使用して画像からカラー プラットを取得する

API を使用すると、画像からカラー パレットを取得することもできます。画像からカラー パレットを取得するために、API には getPalette() メソッドが用意されています。このメソッドは、類似した色をクラスタ化することによって画像からパレットを取得します。パレットは色を含む配列として返され、各色自体は 3 つの整数の配列です。次の 2 行のコードを使用すると、画像から簡単にカラー プレートを取得できます。

画像からカラー プラットを取得

  1. 画像を読み込む
  2. カラープレートを入手

Node.js で色見本画像を抽出する

const img = resolve(process.cwd(), 'rainbow.png');
ColorThief.getPalette(img, 5)
.then(palette => { console.log(palette) })
.catch(err => { console.log(err) })
 日本