我对 Canvas 中图像的像素计数有疑问，请参阅下面的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pixel Counting</title>
<script type="text/javascript">
window.onload = function() {
var img = new Image();
img.src="lena.jpg";
img.onload = function() {
countPixel(img)
};
}
function countPixel(img) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Draw the image to canvas.
context.drawImage(img, 0, 0);
// Now we can get the image data from the canvas.
var imageData = context.getImageData(0, 0, img.width, img.height);
var data = imageData.data;
// Do the pixel counting.
var redCount = new Array(256);
var greenCount = new Array(256);
var blueCount = new Array(256);
for (var i = 0; i < 256; i++) {
redCount[i] = 0;
greenCount[i] = 0;
blueCount[i] = 0;
}
for (var i = 0; i < data.length; i += 4) {
redCount[data[i]]++; // red
greenCount[data[i + 1]]++; // green
blueCount[data[i + 2]]++; // blue
}
// Write the result to table.
var pixelTable = document.getElementById('pixel_table');
for (var i = 0; i < 256; i++) {
var row = pixelTable.insertRow(-1);
row.insertCell(-1).innerHTML = i;
row.insertCell(-1).innerHTML = redCount[i];
row.insertCell(-1).innerHTML = greenCount[i];
row.insertCell(-1).innerHTML = blueCount[i];
}
}
</script>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="500">
</canvas>
</div>
<div>
<table id="pixel_table" border="1">
<caption style="font-size:25px;font-weight:bold;">Pixel Count</caption>
<tr id="header"><th>Intensity</th><th>Red</th><th>Green</th><th>Blue</th></tr>
</table>
</div>
</body>
</html>
我不明白这个 for 循环:
for (var i = 0; i < 256; i++) {
redCount[i] = 0;
greenCount[i] = 0;
blueCount[i] = 0;
}
这里的循环是什么意思？这是计数的开始部分，但为什么要让所有值为零？
最佳答案
这是必需的，因为此时声明的数组中没有任何元素被定义。循环从数组中的第一个元素开始，然后遍历每个元素以将初始值设置为 0(否则它将是未定义的，这会在稍后尝试向其添加数字时给您带来问题)。
但是，在这种情况下更好的选择是替换此 block :
var redCount = new Array(256);
var greenCount = new Array(256);
var blueCount = new Array(256);
for (var i = 0; i < 256; i++) {
redCount[i] = 0;
greenCount[i] = 0;
blueCount[i] = 0;
}
使用类型化数组，其所有值都初始化为 0 并且比基于节点的数组更快:
var redCount = new Uint32Array(256);
var greenCount = new Uint32Array(256);
var blueCount = new Uint32Array(256);
关于javascript - 计算 Canvas 中的像素值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29239781/