我的项目是将图像输入到HTML页面中的canvas标签中,然后循环遍历像素的像素和RGBA值。循环遍历红色值,所以像素中的每四个值,我想记录代表白色像素的像素的位置。现在,我已经通过我从这个博客http://www.phpied.com/photo-canvas-tag-flip/获得的一些代码加载了图像。
他还有另一篇文章,其中提供了一些关于如何循环像素并记录我想要记录的信息的代码,但我不明白,我不想在不知道什么的情况下复制他的代码这是我在做的。那么,任何人都可以解释他正在使用的方法,或者可能告诉我另一种方法来做他正在做的事情?这是指向其他帖子http://www.phpied.com/pixel-manipulation-in-canvas/的链接。
答案 0 :(得分:46)
这很简单。
画布的所有像素数据按顺序存储在数组中。
第一个像素的数据占据数组元素#0-3(红色= 0 /绿色= 1 /蓝色= 2 / alpha = 3)。
第二个像素的数据占据数组元素#4-7(红色= 4 /绿色= 5 /蓝色= 6 / alpha = 7)。
等等......
您可以使用context.getImageData()并通过数组枚举来加载该像素数据。
var imgData = context.getImageData(0,0,canvas.width,canvas.height);
var data = imgData.data;
// enumerate all pixels
// each pixel's r,g,b,a datum are stored in separate sequential array elements
for(var i=0; i<data.length; i+=4) {
var red = data[i];
var green = data[i+1];
var blue = data[i+2];
var alpha = data[i+3];
}
您还可以更改这些数组值,然后使用context.putImageData()将数组保存回图像。
// save any altered pixel data back to the context
// the image will reflect any changes you made
context.putImageData(imgData, 0, 0);
然后,图像将根据您对其像素阵列所做的更改而改变。
答案 1 :(得分:0)
我建议您使用图像处理框架,以便专注于算法而不是操纵值数组。一些框架:
对于MarvinJ,您可以简单地循环遍历像素和行坐标的像素。我使用方法 getIntComponentX()来访问颜色组件。
for(var y=0; y<image.getHeight(); y++){
for(var x=0; x<image.getWidth(); x++){
var red = image.getIntComponent0(x,y);
var green = image.getIntComponent1(x,y);
var blue = image.getIntComponent2(x,y);
}
}
因此,您无需担心像素数据的表示方式。为了检查像素是否为白色:
// Is white?
if(red >= 250 && blue >= 250 && green >= 250){
console.log("Pixel at "+x+","+y+" is white");
}
可运行的示例:
var canvas = document.getElementById("canvas");
image = new MarvinImage();
image.load("https://i.imgur.com/eLZVbQG.png", imageLoaded);
function imageLoaded(){
var whitePixels=0;
for(var y=0; y<image.getHeight(); y++){
for(var x=0; x<image.getWidth(); x++){
var red = image.getIntComponent0(x,y);
var green = image.getIntComponent1(x,y);
var blue = image.getIntComponent2(x,y);
var alpha = image.getAlphaComponent(x,y);
// Is white?
if(red >= 250 && green >= 250 && blue >= 250 && alpha > 0){
whitePixels++;
}
}
}
image.draw(canvas);
document.getElementById("result").innerHTML = "white pixels: "+whitePixels;
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas" width="500" height="344"></canvas>
<div id="result"></div>