ある画像のある部分の色情報を取得したい時があります。例えば、背景画像を元に文字色を決めたい時です。この記事ではそれを web ページ上の JavaScript で実現する方法を紹介します。
完成品が次のデモです。画像をクリックして、その部分の RGBA を取得する機能の実装です。
このデモの内、画像中の色の取得を実現している部分のコードの抜き出しが次です。
const canvas = document.createElement('canvas'); // canvas 要素を生成
context = canvas.getContext('2d'); // 二次元で扱う
context.drawImage(imgElement,0,0,imgElement.width, imgElement.height); // 二次元上に画像要素から画像を描画。途中の 0,0 は座標で左上を指す
// canvas 中の座標を指定して該当部の色情報を取得
// 引数は x, y, width, height
const imgData = context.getImageData(x,y,1,1);
// imgData の data プロパティ中に RGBA 色情報が格納されている
Canvas API – Web API ｜ MDN
HTMLCanvasElement.getContext() – Web API ｜ MDN
CanvasRenderingContext2D.drawImage() – Web APIs ｜ MDN
CanvasRenderingContext2D.getImageData() – Web APIs ｜ MDN
ImageData – Web APIs ｜ MDN
こんな感じで canvas 要素を使って img 要素の画像を取り込むと、取り込んだ画像のある部分で使われている色を取得できます。この取得した色を元に別の色を決定する機能を作ると、それはある画像を元に扱うべき色を決定する機能になります。このあたり上手いこと処理すると何かに紛れて見難い要素が現れることが減ります。色の決定アルゴリズムは、アクセシビリティ 色、あたりでググるといい感じのが出てきやすいです。
JavaScriptで背景色から適した文字色が白か黒かを判定する方法
