いわゆるカラーピッカーをJSで実装しています。
まず画像をcanvasに変換します。
マウスでクリックされた部分のピクセルの画像データを抽出し、色の情報をjQueryで表示しています。
以下の画像をクリックするとここに色の情報を書き出します。
画像をクリックしてください
JSはこちら
$(window).load(function(){
var $img = $('#demo_img');
var canvasEl = document.getElementById('myCanvas');
var imgW = $img.width();
var imgH = $img.height();
//取得した画像サイズのcanvasを追加
$("#demo_canvas").append('<canvas id="myCanvas" width="'+imgW+'" height="'+imgH+'"></canvas>');
//生成したcanvasにimgを描画
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d');
//取得した画像を新しいオブジェクトとして生成
var image = new Image();
image.src = $img.attr("src");
// drawImage(image.src,開始X座標,開始Y座標)
ctx.drawImage(image,0,0);
//クリックしたときのイベント
canvas.onclick = function(mouseEvent)
{
//クリックされた座標のピクセルデータを取得する
var imgData = ctx.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
var rgba = imgData.data;
//rgbaの順で数値を取得できる
t = "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")";
// HTMLの書き換え
$("#result").html('<div class="demo_color" style="background-color:'
+t
+'"></div>'
+'<div class="demo_text">'
+t
+'</div>')
}
});
HTMLはこちら
<div id="result">
<div class="demo_color"></div>
<div class="demo_text">画像をクリックしてください</div>
</div>
<div id="demo_canvas"></div>
