используйте canvas и javascript, чтобы прочитать цвета пикселей изображения - PullRequest
Новая
       56

используйте canvas и javascript, чтобы прочитать цвета пикселей изображения

2 голосов
/ 02 апреля 2012

Я хотел бы знать, возможно ли использовать холсты и javascript для сканирования изображения на предмет определенных цветов пикселей и использовать их для создания карты.Например: найдите #ff0000 и установите его на номер 1 на карте и установите #000000 на 2 и т. д., чтобы сделать карту вроде: 

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

Так что в основном я хочу знать, как получитькод для чтения изображения и поиска цветов, которые я хочу найти, а затем отобразить их в переменной

Ответы [ 2 ]

5 голосов
/ 02 апреля 2012

Это должно быть хорошим началом. 

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';​
0 голосов
/ 02 апреля 2012

Конечно, вы можете работать с отдельными пикселями на холсте. Вот учебник: http://tutorials.jenkov.com/html5-canvas/pixels.html

Но вы можете найти много других в Интернете!

...