Javascript 计算画布中的像素值_Javascript_Html_Canvas

Javascript 计算画布中的像素值

javascript html canvas

Javascript 计算画布中的像素值,javascript,html,canvas,Javascript,Html,Canvas,我有一个关于计算画布中图像像素数的问题，请参见下面的代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pixel Counting</title> <script type="text/javascript"> window.onload = function() { var img

我有一个关于计算画布中图像像素数的问题，请参见下面的代码：

  <!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>


像素计数
window.onload=函数（）{
var img=新图像（）；
img.src=“lena.jpg”；
img.onload=函数（）{
计数像素（img）
};
}
函数计数像素（img）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
//将图像绘制到画布。
drawImage（img，0,0）；
//现在我们可以从画布上获取图像数据。
var imageData=context.getImageData（0,0，img.width，img.height）；
var数据=imageData.data；
//进行像素计数。
var redCount=新数组（256）；
var greenCount=新阵列（256）；
var blueCount=新阵列（256）；
对于（变量i=0；i<256；i++）{
redCount[i]=0；
绿数[i]=0；
蓝数[i]=0；
}
对于（变量i=0；i


我不理解循环的这一点：
  for (var i = 0; i < 256; i++) {
    redCount[i] = 0;
    greenCount[i] = 0;
    blueCount[i] = 0;
}

for（变量i=0；i<256；i++）{
redCount[i]=0；
绿数[i]=0；
蓝数[i]=0；
}

这个循环是什么意思？这是计数的开始部分，但为什么要将所有值设为零？
如果不这样做，数组将被未定义的值填充
new Array(5);

将导致：
[undefined, undefined, undefined, undefined, undefined]

这是必需的，因为声明的数组中没有任何元素在该点上定义。循环从数组中的第一个元素开始，然后遍历每个元素以将初始值设置为0（否则它将是未定义的，这将在以后尝试向其添加数字时给您带来问题）
但是，在这种情况下，更好的选择是替换此块：
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;
}

我尝试过，是的，它充满了未定义的值，但为什么？这只是数组在javascript中的工作方式。非类型化数组不知道要放入什么。如果你想添加数字0是有意义的，但你也可以在其中添加字符串或日期，因为0根本没有意义。谢谢你的评论，但你的意思是“声明数组中的所有元素都没有在该点定义。”，这是否意味着循环定义计数从零开始？？？@user4696819循环从数组中的第一个元素开始是，然后通过每个元素将初始值设置为0（否则它将是未定义的，这将在以后尝试向其添加数字时给您带来问题）更直接的“当您尝试添加数字时，会给您带来问题如果任何数组元素以值undefined开头，那么该元素将始终是未定义的，因为undefined+1==Not-a-Number。因此，从未定义的数组中永远不会得到所需的结果elements@markE正确，这就是为什么以后会出现问题。这就是为什么需要对其进行初始化。
var redCount = new Uint32Array(256);
var greenCount = new Uint32Array(256);
var blueCount = new Uint32Array(256);