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

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

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

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

任何人都可以提供方法或来源将上面的PNG图像转换为2D阵列,其中1 = land和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.

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

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?

我觉得我非常接近得到我需要的东西。我需要做些什么来更改主要的for循环而不是在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.

请注意,我使用的是base64图像,因此我们不允许粘贴此处,因为它太长了。请改变我的小提琴。

HTML:

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

2 个解决方案

#1

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/

看起来图像数据返回单个rgba组件数组,您只需将其分解为行。见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

2 个解决方案

#1

更多相关文章

随机推荐