循环浏览图像中的像素
Looping through pixels in an image
我的项目是将图像输入到HTML页面中的画布标记中,然后循环遍历像素和像素的RGBA值。在循环遍历红色值时,因此像素中每四个值,我想记录代表白色像素的像素的位置。现在,我已经用我从这个博客中得到的一些代码加载了图像,http://www.phpied.com/photo-canvas-tag-flip/。
他在另一篇帖子中给出了一些关于如何在像素中循环并记录我想要记录的信息的代码,但我不理解,我不想在不知道自己在做什么的情况下复制他的代码。那么,有人能解释一下他正在使用的方法吗?或者给我看看他正在做的事情的另一种方法?这是另一篇文章的链接http://www.phpied.com/pixel-manipulation-in-canvas/。
这很简单。
画布的所有像素数据都按顺序存储在一个数组中。
第一个像素的数据占据阵列元素#0-3(红色=0/绿色=1/蓝色=2/阿尔法=3)。
第二像素的数据占据阵列元素#4-7(红色=4/绿色=5/蓝色=6/α=7)。
等等…
您可以使用context.getImageData()并枚举数组来加载像素数据:
const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
const data = imgData.data;
// enumerate all pixels
// each pixel's r,g,b,a datum are stored in separate sequential array elements
for(let i = 0; i < data.length; i += 4) {
const red = data[i];
const green = data[i + 1];
const blue = data[i + 2];
const 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);
然后,图像将根据您对其像素阵列所做的更改而更改。
每个像素包含4个分量——红、绿、蓝、阿尔法——每个分量的编号为0-255。循环从左上角开始,从右下角开始。
我建议您使用图像处理框架,以便专注于算法,而不是操纵值数组。一些框架:
- fabric.js
- processing.js
- MarvinJ
在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>
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 画布:逐像素绘制图像并请求动画帧计时
- 获取图像的平均外部像素颜色
- 使用回调获取图像像素数据
- ExtJS:“图像”类型的精灵:如何更改像素
- 从 JavaScript 中的图像中读取像素数据会返回半透明像素的意外结果
- 如何在Imgareaselect中选择图像根据像素进行选择
- 在图像像素加载时提交表单
- 使用像素检测后无法拖动Kinetic.JS图像
- 在CSS中按半像素移动的图像插值
- 裁剪后的图像大于 coppit.js 中以像素为单位的内在大小
- 将跟踪像素添加到 jQuery 图像轮播中的每个图像
- Javascript - 如何使用基于站点像素颜色的画布创建图像
- 如何将画布图像数据转换为具有适当 x,y 的每像素文本值数组
- HTML/javascript 获取(和设置)像素 - 远程图像
- 在 JavaScript 画布中获取图像的颜色像素
- 如何将图像像素转换为纬度和液化天然气中的相同位置以供谷歌地图使用
- 图像的模糊/像素化预加载
- HTML5,在加载时将像素渲染为图像,以加快绘制时间
- 获取图像的第一个像素颜色(JS/jQuery)