計算畫布中的像素值

Question

我對畫布中圖像的像素計數有疑問，請參見下面的代碼：

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

這里的循環是什么意思？ 這是計數的開始部分，但是為什么要將所有值都設為零？

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);

計算畫布中的像素值

問題描述

2 個解決方案

解決方案1
1 2015-03-24 18:08:39

解決方案2
1 已采納

計算畫布中的像素值

問題描述

2 個解決方案

解決方案1 1 2015-03-24 18:08:39

解決方案2 1 已采納

解決方案1
1 2015-03-24 18:08:39

解決方案2
1 已采納