如何将图像（PNG）转换为二维数组（二进制图像）？ [英] How do you convert an image (PNG) to a 2D Array (binary image)?

问题描述

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

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

阅读我想通过在线使用

我觉得我非常接近获取我需要的东西。我需要做些什么来改变主 for-loop 来保存Matrix中的数据？

JavaScript： / strong>

  $（document）.ready（function（）{
 $（＃btnSubmit）。点击（function（）{
 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; 
 for（var p = 0，len = imdata.length; p  r = imdata [p] 
 g = imdata [p + 1]; 
 b = imdata [p + 2]; （（r> = 164& r <= 255）&（g> = 191&< = 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（）; 
} 
  

请注意，我使用了一个 base64 图片我们不允许在这里粘贴，因为它太长了。请我的小提琴代替。

HTML：

 < img id ='myImage'src ='base64图片数据'/> 
< br /> 
< input id =btnSubmittype =buttonvalue =Get Binary Image/> 
  

解决方案

图像数据返回一个rgba组件的单个数组，你只需将其分解成行。请参阅 http://jsfiddle.net/mendesjuan/wjn0dub7/1/

  var currentInnerArray; 
 var zeroesAndOnes = []; 
 for（var p = 0，len = imdata.length; p  r = imdata [p] 
 g = imdata [p + 1]; 
 b = imdata [p + 2]; 
 
 //每行是像素宽度* 4，（rgba），开始换行
 if（p％imdata.width * 4 === 0）{
 currentInnerArray = []; 
 zeroesAndOnes.push（currentInnerArray）; （（r> = 164& r <= 255）&（g> = 191&< = 229）&& ;（b> = 220& b< = 255））{
 currentInnerArray.push（0）; 
 //黑色=水
 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有你的二维数组
  

I need a 2D binary representation of the following PNG image:

Can anyone provide a method or a source to convert PNG image above to a 2D array where 1 = land and 0 = water?

With some reading I figured out a way to loop through all the pixels in the image after converting the image to base64 using online Base64ImageEncoder.

With the following fiddle I am able to figure out if the pixel is water or land then change the pixel color, so the output is:

I feel that I am very close to getting exactly what I need. What do I need to do to change the main for-loop to instead save data inside of a Matrix?

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();
}               

Please note that I used a base64 image so we are not allowed to paste here because it is too long. Please my fiddle instead.

HTML:

<img id='myImage' src='base64 image data' />
<br />
<input id = "btnSubmit" type="button" value="Get Binary Image"/>

解决方案

It looks like image data returns a single array of rgba components, you just have to break it up into rows. See http://jsfiddle.net/mendesjuan/wjn0dub7/1/

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

这篇关于如何将图像（PNG）转换为二维数组（二进制图像）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！