ブラウザで画像を表示して画像から色コード（ＲＧＢ値）を抽出するものを作ってみた。
サーバは使用しない。jQuery でローカルＰＣだけで実行する。
ＲＧＢ値を抽出後、右クリックでクリップボードにコピーしたかったのだが、GitHub にある zeroclipboard は、
Flash を使用するので使う気になれず、右クリックでクリップボードにコピーは、諦めることにした。
jQuery の記述は以下のようになる。
<script type="text/javascript">
$(function(){
// <input id="imgfile" イメージファイル読込
$('#imgfile').change(function(){
if (window.File){
var input = document.getElementById("imgfile");
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onloadend = function(event){
var img = document.getElementById("target");
img.src = event.target.result;
// 下で宣言した pick結果のクリア関数呼び出し
clearPaste();
}
// マウス over → color pick
$('#target').mousemove(function(e){
this.canvas = $('<canvas />')[0];
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.getContext('2d').drawImage(this, 0, 0, this.width, this.height);
var pixelData = this.canvas.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
hexR = toHex(pixelData[0]);
hexG = toHex(pixelData[1]);
hexB = toHex(pixelData[2]);
hexA = toHex(pixelData[3]);
$('#decR').html(pixelData[0]);
$('#decG').html(pixelData[1]);
$('#decB').html(pixelData[2]);
$('#decA').html(pixelData[3]);
$('#hexR').html(hexR);
$('#hexG').html(hexG);
$('#hexB').html(hexB);
$('#hexA').html(hexA);
$('#hexRGB').attr("value", hexR + hexG + hexB);
$('#pcolor').css("background-color", "#" + hexR + hexG + hexB)
});
}
});
var toHex = function(v){
return v < 16 ? '0' + v.toString(16) : v.toString(16);
};
$('#target').bind("contextmenu", function(){
$('#pasteRGB').html(hexR + hexG + hexB);
return false;
});
// pick結果のクリア
var clearPaste = function(){
$('#decR').html("");
$('#decG').html("");
$('#decB').html("");
$('#decA').html("");
$('#hexR').html("");
$('#hexG').html("");
$('#hexB').html("");
$('#hexA').html("");
$('#hexRGB').attr("value", "");
$('#pasteRGB').html("");
$('#pcolor').css("background-color", "#ffffff")
};
});
</script>
ＨＴＭＬ―BODY の記述は、、、
<body>
<h2>Color Picker</h2>
<div>
<input id="imgfile" name="imgfile" type="file" accept="image/*" />
<br/><br/>
<table class="grid">
<tr>
<th>R</th><td><span id="decR"></span></td><td><span id="hexR"></span></td>
<th>RGB</th><td><input id="hexRGB" maxlength="6" size="6"/></td>
<th>paste</th><td class="grid-paste"><span id="pasteRGB"></span></td>
</tr>
<tr>
<th>G</th><td><span id="decG"></span></td><td><span id="hexG"></span></td>
<td colspan="4" rowspan="3" id="pcolor"></td>
</tr>
<tr>
<th>B</th><td><span id="decB"></span></td><td><span id="hexB"></span></td>
</tr>
<tr>
<th>A</th><td><span id="decA"></span></td><td><span id="hexA"></span></td>
</tr>
</table>
</div>
<br/><br/>
<div>
<img id="target" />
</div>
chrome での実行、マウス over で画像の適当なところで右クリックで、paste の個所が固定で貼り付け表示されるようになる。
