Canvas Color Picker
Colour Picker Canvas
But wouldn't it be simpler to just pick the pixel in the image when you click?? Sure! but... you can't, due to javascript limitations/security. Damn. Oh wait what about <canvas>.
So I did a little experiment and here is the result (sorry won't work in IE8).
Canvas drawImage example 1
So here is the script:
// use jQuery on page load to draw the canvas image
$(function() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'media/show/280';
img.onload = function(){
ctx.drawImage(img,0,0);
}
$('canvas').bind('mousemove', function(event){
var x = event.pageX - event.currentTarget.offsetLeft
var y = event.pageY - event.currentTarget.offsetTop;
var ctx = document.getElementById('canvas').getContext('2d');
var imgd = ctx.getImageData(x, y, 1, 1);
var data = imgd.data;
var out = $('#result');
var hexString = RGBtoHex(data[0],data[1],data[2]);
out.html("color is #" + hexString);
out.attr("style","background-color: #" + hexString + ";");
});
}
);
//from http://www.linuxtopia.org/online_books/javascript_guides/javascript_faq/rgbtohex.htm
function RGBtoHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(N) {
if (N==null) return "00";
N=parseInt(N); if (N==0 || isNaN(N)) return "00";
N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
return "0123456789ABCDEF".charAt((N-N%16)/16)
+ "0123456789ABCDEF".charAt(N%16);
}
and the HTML looks like this:
<h2>Canvas <code>drawImage</code> example 1</h2>
<div>
<canvas id="canvas" width="370" height="370" >Oh, sorry I don't get Canvas yet</canvas>
</div>
<span style="" id="result"></span>
<div>
<canvas id="canvas" width="370" height="370" >Oh, sorry I don't get Canvas yet</canvas>
</div>
<span style="" id="result"></span>