Question

我对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 (var i = 0; i < 256; i++) {
    redCount[i] = 0;
    greenCount[i] = 0;
    blueCount[i] = 0;
}

这循环是什么意思？这是计数的开始部分，但为什么要将所有值都设为零？

Answer 1

如果不这样做，数组将填充未定义的值。

new Array(5);

将导致：

[undefined, undefined, undefined, undefined, undefined]

Answer 2

这是必需的，因为在那个点上没有定义声明的数组中的任何元素。循环从数组中的第一个元素开始，然后遍历每一个元素以将初始值设置为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;
}

使用类型化数组，它们的所有值都初始化为0，并且比基于节点的数组更快：

var redCount = new Uint32Array(256);
var greenCount = new Uint32Array(256);
var blueCount = new Uint32Array(256);

计算Canvas中的像素值

2 个答案: