アップロードした画像に色を見つけることができる検索ボックスを作成する

Question

これまでのコードでは、ユーザーが画像をアップロードするようになっていましたが、検索ボックスで画像の色を見つける方法その上に黄色の点を置く。

<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がある。ここhttp://html-color-codes.info/

が私のコードです：ここでは

は、私はオンラインを発見した例です。幅x高さx 4のサイズを有する配列であり、各4つの連続する値は、ピクセルのR、G、BおよびAである。

ピクセル@座標の緑の値を取得するには（20、3）、あなたはimgData[(20 + 3 * img.width) * 4 + 1]