Verwenden Sie Canvas und Javascript, um die Pixelfarben eines Bildes zu lesen

Question

Ich würde gerne wissen, ob es möglich ist, Leinwand und Javascript zu verwenden, um ein Bild nach bestimmten Pixelfarben zu scannen und daraus eine Karte zu erstellen. zB: #ff0000 finden und es zu der Nummer 1 auf der Karte festgelegt und eingestellt #000000-2 und so auf eine Karte zu machen wie:

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] 
]; 

Also im Grunde Ich möchte wissen, wie Sie den Code erhalten zu lesen ein Bild und finde die Farben, nach denen ich suchen möchte und zeichne sie dann in einer Variablen

Answer 1

Dies sollte ein guter Anfang sein.

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

Natürlich können Sie mit einzelnen Pixeln in der Leinwand arbeiten. Hier ist ein Tutorial: http://tutorials.jenkov.com/html5-canvas/pixels.html

Aber Sie können viele andere im Internet finden!