キャンバスとJavaScriptを使用して画像のピクセルカラーを読み取る

Question

キャンバスとジャバスクリプトを使用して特定のピクセルカラーの画像をスキャンしてマップを作成することができるかどうかを知りたいと思います。 例： #ff0000を見つけて、地図上の番号1に設定し、2に#000000を設定するなどのようなマップを作るために：だから基本的に私は読むためのコードを取得する方法を知りたい

var map = [ 
    [1,1,1,1,1], 
    [1,0,0,0,1], 
    [1,0,2,0,1], 
    [1,0,0,0,1], 
    [1,1,1,1,1] 
]; 

を画像を検索し、検索したい色を見つけて変数にプロットする

Answer 1

これは良いスタートになるはずです。

var zeroFill = function(num, padding) { 
    return Array(padding + 1 - (num + '').length).join('0') + num; 
}; 

var hexColorsToId = { 
     'ff0000': 1, 
     '000000': 2 
     /* ... */ 
    }, 
    map = [], 
    canvas = document.createElement('canvas'), 
    ctx = canvas.getContext('2d'), 
    image = new Image; 

image.onload = function() { 
    canvas.width = image.width; 
    canvas.height = image.height; 
    ctx.drawImage(image, 0, 0, image.width, image.height); 

    var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; 

    for (var i = 0; i < data.length; i += 4) { 
     var red = zeroFill(data[i].toString(16), 2), 
      green = zeroFill(data[i + 1].toString(16), 2), 
      blue = zeroFill(data[i + 2].toString(16), 2), 
      hex = red + green + blue; 

     if (hexColorsToId.hasOwnProperty(hex)) { 
      map.push(hexColorsToId[hex]); 
     } 
    } 
}; 

image.src = '/img/logo.png';​ 

Answer 2

もちろん、キャンバス内の単一ピクセルで作業できます。チュートリアルです：http://tutorials.jenkov.com/html5-canvas/pixels.html

しかし、あなたはウェブ上で多くの他のものを見つけることができます！