javascript - 制作一个可以在上传的图片中找到颜色的搜索框

Question

到目前为止，我的代码让用户上传了一张图片，但我仍然不知道如何让搜索框找到图片上的颜色并在上面放一个黄点。

这是我在网上找到的一个例子: http://html-color-codes.info/

这是我的代码:

<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<canvas id="imageCanvas"></canvas>

<script>
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
    var img = new Image();
    img.onload = function(){
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img,0,0);
    }
    img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);     
}
</script>

Answer 1

绘制图像后，您可以执行以下操作:

imgData = ctx.getImageData(0, 0, img.width, img.height).data;

imgData是一个数组，大小为width x height x 4，每四个连续的值分别为一个像素的R、G、B、A。

要获取像素@坐标(20, 3)的绿色值，必须读取imgData[(20 + 3 * img.width) * 4 + 1]