使用畫布和JavaScript來讀取圖像的像素顏色

我想知道是否可以使用畫布和JavaScript掃描圖像的某些像素顏色，並使用它們來製作地圖。如：找到#ff0000並將其設置爲1號在地圖上，並設置#000000爲2等，使地圖，如：使用畫布和JavaScript來讀取圖像的像素顏色

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

所以基本上我想知道如何得到的代碼讀取一個圖像，並找到我想要它搜索的顏色，然後將它們繪製在一個變量中

來源

2012-04-02 user1306988

這應該是一個好的開始。

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

來源

2012-04-02 00:52:27 alex

感謝您的幫助，但我必須問，var zeroFill在做什麼？我明白這一切，除了零填充，會發生什麼取決於數量和填充值？謝謝 – user1306988 2012-04-02 07:08:18

@ user1306988如果你得到'0'和'toString（16）'，它仍然是'0'。但是，當在'rrggbb'分組中看到'0'時，它總是有一個前面的'0'。因此它需要一個諸如「0」的參數並確保它總是具有前導零，例如， '00'或'04'。 – alex 2012-04-02 07:20:11

對不起，要求愚蠢，但我只是離開數量和填充，因爲它們或有價值，我應該設置他們？如果是這樣，我怎麼知道要設置它們 – user1306988 2012-04-02 07:51:18

-1

當然，您可以使用畫布中的單個像素。這裏有一個教程：http://tutorials.jenkov.com/html5-canvas/pixels.html

但你可以在網上找到很多其他人！

來源

2012-04-02 00:50:45 Saturnix

使用畫布和JavaScript來讀取圖像的像素顏色

回答

相關問題