Javascript 如何将图像（PNG）转换为2D数组（二进制图像）？

我需要以下PNG图像的2D二进制表示：

任何人都可以提供一种方法或源来将上面的PNG图像转换为2D数组，其中1=陆地，0=水

通过一些阅读，我找到了一种方法，在使用online将图像转换为base64后，循环遍历图像中的所有像素

通过以下步骤，我能够确定像素是水还是陆地，然后更改像素颜色，因此输出为：

我觉得我很快就能得到我所需要的。我需要做什么来更改主for循环，以将数据保存在矩阵中

JavaScript:

$(document).ready(function() {
    $("#btnSubmit").click(function(){
        GetBinary();
    }); 
});

function GetBinary() {
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

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

    var r,g,b;
    for(var p = 0, len = imdata.length; p < len; p+=4) {
        r = imdata[p]
        g = imdata[p+1];
        b = imdata[p+2];

        if ((r >= 164 && r <= 255) && (g >= 191 && g <= 229) && (b >= 220 && b <= 255)) {

            // black  = water
             imdata[p] = 0;
             imdata[p+1] = 0;
             imdata[p+2] = 0;

        } else {

            // white = land
             imdata[p] = 255;
             imdata[p+1] = 255;
             imdata[p+2] = 255;                     
        }                   
    }
    ctx.putImageData(map,0,0);
    imgElement.src = canvas.toDataURL();
}               

$（文档）.ready（函数（）{
$（“#btnsupmit”）。单击（函数（）{
GetBinary（）；
}); 
});
函数GetBinary（）{
var canvas=document.createElement（“canvas”）；
canvas.width=imgElement.offsetWidth；
canvas.height=imgElement.offsetHeight；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（imgElement，0,0）；
var map=ctx.getImageData（0,0，canvas.width，canvas.height）；
var imdata=map.data；
var r，g，b；
对于（var p=0，len=imdata.length；p如果（（r>=164&&r=191&&g=220&&b图像数据返回单个rgba组件数组，则只需将其拆分为行。请参阅

var-currentinnerray；
var zeroesAndOnes=[]；
对于（var p=0，len=imdata.length；p如果（（r>=164&&r=191&&g=220&&b如果您想以二维数组的形式访问单个像素，这里是相关部分

var w = canvas.width * 4;
var r,g,b;

for (var i=0; i<canvas.width * 4; i+=4) {
  for (var j=0; j<canvas.height; j+=1) {
        //console.log(j*w+i, j*w+i+1, j*w+i+2, j*w+i+3);
    r = imdata[j*w+i]
            g = imdata[j*w+i+1];
            b = imdata[j*w+i+2];

    if ((r >= 164 && r <= 255) && 
        (g >= 191 && g <= 229) && 
        (b >= 220 && b <= 255)) {

      // blue  = water
      imdata[j*w+i] = 0;
      imdata[j*w+i+1] = 0;
      imdata[j*w+i+2] = 150;

    } else {

      // green = land
      imdata[j*w+i] = 0;
      imdata[j*w+i+1] = 120;
      imdata[j*w+i+2] = 0;                      
    }                   
  }
}

var w=canvas.width*4；
var r，g，b；
对于（var i=0；为了理解问题，您不确定新行（内部数组）从何处开始？它可能是
pixelWidth/4
？@JuanMendes:hmm为什么是4？因为看起来您有四个数字定义一个像素？
var currentInnerArray;
var zeroesAndOnes = [];
for(var p = 0, len = imdata.length; p < len; p+=4) {
    r = imdata[p]
    g = imdata[p+1];
    b = imdata[p+2];

    // Each line is the pixel width * 4, (rgba), start a newline
    if (p % imdata.width * 4 === 0) {
      currentInnerArray = [];
      zeroesAndOnes.push(currentInnerArray);
    }
    if ((r >= 164 && r <= 255) && (g >= 191 && g <= 229) && (b >= 220 && b <= 255)) {
      currentInnerArray.push(0);
      // black  = water
      imdata[p] = 0;
      imdata[p+1] = 0;
      imdata[p+2] = 0;

   } else {
     currentInnerArray.push(1);
     // white = land
     imdata[p] = 255;
     imdata[p+1] = 255;
     imdata[p+2] = 255;
     }                  
}
// zeroesAndOnes has your 2d array

var w = canvas.width * 4;
var r,g,b;

for (var i=0; i<canvas.width * 4; i+=4) {
  for (var j=0; j<canvas.height; j+=1) {
        //console.log(j*w+i, j*w+i+1, j*w+i+2, j*w+i+3);
    r = imdata[j*w+i]
            g = imdata[j*w+i+1];
            b = imdata[j*w+i+2];

    if ((r >= 164 && r <= 255) && 
        (g >= 191 && g <= 229) && 
        (b >= 220 && b <= 255)) {

      // blue  = water
      imdata[j*w+i] = 0;
      imdata[j*w+i+1] = 0;
      imdata[j*w+i+2] = 150;

    } else {

      // green = land
      imdata[j*w+i] = 0;
      imdata[j*w+i+1] = 120;
      imdata[j*w+i+2] = 0;                      
    }                   
  }
}