画像から色を取得する方法
画像をCanvasに書出する。そのあと、Canvasの座標位置からカラーを取得する。
サイズが決まっていない画像をCanvas描画する
Canvasの縦横のサイズがわからないので、js-でCanvasを自動生成して、そのあとに、Canvasに画像を描画しています。
画像やCanvasの表示エリアを指定する
idで取得する画像、Canvasの表示場所、背景色を変更する要素のそれぞれの要素のidをHTMLで記載して指定しておく。
Java Script
//<!-- 画像をcanvasに変換 -->
window.onload = ()=>{
//idを定義
const img_c01 = document.getElementById("midasi_img"); //表示元の画像id
const vc_box01 = document.getElementById('midasi_back_erea');//キャンバスを描画するエリアのid,背景画像に透かし
const vc_box02 = document.querySelector("#midasi_back_color");//背景色を変更するエリアのid
// 取得した画像サイズのCanvasを書出す
const imgW = img_c01.width;
const imgH = img_c01.height;
const f_text = '<canvas id="board" width="'+ imgW + '" height="' + imgH + '"></canvas>';//表示場所
vc_box01.innerHTML = f_text;//指定idにHTML追加する
// canvas描画準備
const canvas01 = document.querySelector("board");//表示するキャンバスのid
const context = board.getContext("2d");
// 画像読み込み
const image_c01 = new Image();
// 画像要素を生成します
image_c01.src = img_c01.src; // 画像のURLを取得
//画像をonloadしたとき発火
image_c01.onload = () => {
// drawImage(image.src, translateX, translateY,w,h)
context.drawImage(image_c01, 0, 0, imgW, imgH );//Canvasへ画像を描写
//画像の指定座標でImageDataカラー取得
const x1 = parseInt(3,10);//座標ｘ(3px),parseIntで十進数で返す
const y1 = imgH / 4;//座標y センター位置
const x2 = imgW - 3 ;
const y2 = imgH / 4 * 3;
const imgD1 = context.getImageData(x1, y1, 1, 1);//座標点データ取得( 開始x座標, 開始y座標, 取得範囲の幅, 取得範囲の高さ)
const imgD2 = context.getImageData(x2, y2, 1, 1);//座標のデータ取得
const c_Color1 = RGB2bgColor( imgD1.data[0] , imgD1.data[1] , imgD1.data[2] );//Class処理
const c_Color2 = RGB2bgColor( imgD2.data[0] , imgD2.data[1] , imgD2.data[2] );//Class処理
//背景グラデーション色を表示
var gradi_v = getCssValuePrefix(vc_box02, c_Color1, c_Color2);//Class処理
//背景画像を変更
vc_box01.style.backgroundImage = "url(" + image_c01.src + ")";
//背景単色を表示
//vc_box02.style.backgroundColor = RGB2bgColor(r1,g1,b1);
};
};
jsで背景をグラデーション色にする
jsでstyleを追加する。単色の場合は、background-colorで簡単に実装できるのですが、グラデーションにする場合は、CSSでの記載方法と異なり、-webkit-での記述が必要になるので注意する。ブラザ依存なのでCSSごと生成するほうがはやいかもしれない。
背景色を変更するjsを実装した結果
画像を読み込み、Canvasを描画して、カラーを取得して、CSSを表示するという流れのため、背景色を表示するまで時間がかかる。今後の改善点としては、jsでのグラデーションを実装した場合はCSSの記載が推奨ではないこと。ページの表示のたびにjsを使わない方が理想。画像をアップロードしたときにCanvasを作成し色を取得しておく。毎回Canvasを描画するよりは、取得済の色を指定して表示する仕様にしたほうがいいかもしれない。
Java Script
//------
function RGBA_data(imagedata){
//RGBAカラーを取得
const r = imagedata.data[0];
const g = imagedata.data[1];
const b = imagedata.data[2];
const a = imagedata.data[3];
}//
//-------------------
//２つの色の平均値
//-------------------
// 2つのグリッド同士の色の平均値を取得します
function getAverageColor (color1, color2) {
var averageColor = [];
averageColor.r = (((color1.r + color2.r) / 2) + 0.5) | 0;
averageColor.g = (((color1.g + color2.g) / 2) + 0.5) | 0;
averageColor.b = (((color1.b + color2.b) / 2) + 0.5) | 0;
return averageColor;
}//
//-------------------
// RGBから#ffffff形式へ変換する
//----------------
function RGB2bgColor(r,g,b) {
r = r.toString(16);
if (r.length == 1) r = "0" + r;
g = g.toString(16);
if (g.length == 1) g = "0" + g;
b = b.toString(16);
if (b.length == 1) b = "0" + b;
return '#' + r + g + b;
}//
//---------------------
//background linear-gradient
//--------------------
function getCssValuePrefix(dom_id, color1, color2){
var rtrnVal = '';//default to standard syntax
var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];
for (var i = 0; i < prefixes.length; i++){
// Attempt to set the style
dom_id.style.background = prefixes[i] + 'linear-gradient('+ color1 +','+ color2 +')';
// Detect if the style was successfully set
if (dom_id.style.background){
rtrnVal = prefixes[i];
}
}
dom_id= null;
delete dom_id;
return rtrnVal;
}//
