Javascript HTML5画布：上传图像颜色选择器

我正在使用html画布和javascript创建一个应用程序。你上传和图像，并从它的颜色选择，但我有一个问题，我只能从上传图像的一小部分颜色选择。我尝试了一些方法来解决它，但我有点不知所措。有人有什么想法吗？ 我用这个来帮助我：

十六进制：
RGB：

var$files=document.getElementById（'file_upload'）.files[0]；
var reader=new FileReader（）；
reader.onload=imagesisload；
函数imageIsLoaded（e）{
//帆布
var canvas=document.getElementById（'canvas_picker'）；
var context=canvas.getContext（'2d'）；
变量$img=$（'
当我点击小区域外的像素时，它返回为0。

修复了一些问题，如尝试读取画布而不是上下文，以及在XY 10,10而不是0,0处绘制图像。

此外，您可能需要将画布大小调整为上传的图像W/H

为了防止坐标计算错误（因为您获得的是与页面边缘相对应的点击坐标）并获得鼠标在画布中的准确位置，您可能需要从生成的坐标
x
，
y
中减去


var$picked=$（“#picked”）；//仅预览拾取的颜色
var canvas=$（'#canvas_picker'）[0]；
var context=canvas.getContext（'2d'）；
$（“#文件上传”）.change（函数（e）{
var F=this.files[0]；
var reader=new FileReader（）；
reader.onload=imagesisload；
reader.readAsDataURL（F）；
});
函数imageIsLoaded（e）{
var img=新图像（）；
img.onload=函数（）{
canvas.width=this.width；//如果需要，请调整画布大小
canvas.height=this.height；//对应于图像大小
context.drawImage（this，0，0）；//在0，0处绘制图像，而不是在10，10处绘制图像
};
img.src=e.target.result；
}
$（“#画布_选择器”）。单击（函数（事件）{
var x=event.pageX-$（this）.offset（）.left；//固定坐标
var y=event.pageY-$（this）.offset（）.top；//分别对应于画布。
var img_data=context.getImageData（x，y，1，1）.data；
var R=img_数据[0]；
var G=img_数据[1]；
var B=img_数据[2]；
var rgb=R+'，'+G+'，'+B；
var hex=rgbToHex（R，G，B）；
$（'#rgb输入'）.val（rgb）；
$（'#十六进制输入'）.val（'#'+hex）；
$picked.append（“#”+hex+”）；
});
函数rgbToHex（R、G、B）{
返回到HEX（R）+toHex（G）+toHex（B）；
}
函数toHex（n）{
n=parseInt（n，10）；
如果（isNaN（n））返回“00”；
n=Math.max（0，Math.min（n，255））；
返回“0123456789ABCDEF”.charAt（（n-n%16）/16）+“0123456789ABCDEF”.charAt（n%16）；
}
*{margin:0；}
画布{背景：#ddd；}
#拾取跨度{
显示：内联块；
宽度：50px；
高度：50px；
保证金：3倍；
文本对齐：居中；
文本阴影：1px 1px 1px#000；
字体：8px/50px Arial；
颜色：#fff；
}





十六进制：
RGB：
当我尝试你的代码时，它工作得非常好，只是鼠标没有很好地与选择器对齐。这是因为你在（10,10）坐标处渲染图像，但在鼠标位置（x，y）处渲染图像

@用户3053151:）很高兴我这么做了！谢谢，很高兴编码！
<canvas width="600" height="300" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

// I replaced the following code
var $img = $('<img>', { src: e.target.result });
$img.load(function() {
    context.drawImage(this,10, 10);
    $("#loader").hide();
}); 
// By this one
var img = new Image();
$img.load(function() {
    context.drawImage(this,10, 10);
    $("#loader").hide();
}); 
img.src = e.target.result;

// getting image data and RGB values
var canvas = document.getElementById('canvas_picker');
var context = canvas.getContext('2d');
var img_data = context.getImageData(x,y , 1, 1).data;