如何将图像 (PNG) 转换为二维数组(二值图像)?
How do you convert an image (PNG) to a 2D Array (binary image)?
我需要以下 PNG 图像的二维二进制表示:
谁能提供将上述 PNG 图像转换为 1 = 陆地和 0 = 水的二维数组的方法或来源?
通过一些阅读,我找到了一种在使用在线 Base64ImageEncoder.[=17= 将图像转换为 base64 后循环遍历图像中所有像素的方法]
通过以下 fiddle 我能够确定像素是 water 还是 land 然后更改像素颜色,所以输出是:
我觉得我已经非常接近我所需要的了。我需要做什么才能将主要的 for-loop 更改为将数据保存在 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();
}
请注意,我使用了 base64 图片,所以我们不允许粘贴在这里,因为它太长了。请 my fiddle 代替。
HTML:
<img id='myImage' src='base64 image data' />
<br />
<input id = "btnSubmit" type="button" value="Get Binary Image"/>
它看起来像图像数据 returns 一个单一的 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
如果您想以二维数组的形式访问单个像素,请查看相关部分
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;
}
}
}
我需要以下 PNG 图像的二维二进制表示:
谁能提供将上述 PNG 图像转换为 1 = 陆地和 0 = 水的二维数组的方法或来源?
通过一些阅读,我找到了一种在使用在线 Base64ImageEncoder.[=17= 将图像转换为 base64 后循环遍历图像中所有像素的方法]
通过以下 fiddle 我能够确定像素是 water 还是 land 然后更改像素颜色,所以输出是:
我觉得我已经非常接近我所需要的了。我需要做什么才能将主要的 for-loop 更改为将数据保存在 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();
}
请注意,我使用了 base64 图片,所以我们不允许粘贴在这里,因为它太长了。请 my fiddle 代替。
HTML:
<img id='myImage' src='base64 image data' />
<br />
<input id = "btnSubmit" type="button" value="Get Binary Image"/>
它看起来像图像数据 returns 一个单一的 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
如果您想以二维数组的形式访问单个像素,请查看相关部分
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;
}
}
}