0

在这篇文章中，为什么在循环中i增加了 4 而不是 1？。我试过changong i+=4to，i++但它不能正常工作。你能告诉我背后的原因是什么吗？

function grayScale(context, canvas) {
    var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
        var pixels  = imgData.data;
        for (var i = 0, n = pixels.length; i < n; i += 4) {
        var grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
        pixels[i  ] = grayscale;        // red
        pixels[i+1] = grayscale;        // green
        pixels[i+2] = grayscale;        // blue
        //pixels[i+3]              is alpha
    }
    //redraw the image in black & white
    context.putImageData(imgData, 0, 0);
  }
  //add the function call in the imageObj.onload
  imageObj.onload = function(){
      context.drawImage(imageObj, destX, destY);
      grayScale(context, canvas);
  };
4

5 回答 5

1

在我看来，i=red、i+1=green、i+2=blue、i+3=alpha。所以 i+4 会再次变红。因此 for 循环在数组中迭代四次而不是一次以区分单独的像素。

于 2012-10-18T19:32:25.880 回答
1

因为在 for 循环中发生的事情是修改数组中的四个点，它们代表组成单个像素的红色、绿色、蓝色和 alpha 通道。for 循环递增 4 以跳转到下一个像素的下一组红色、绿色、蓝色和 alpha 通道。

于 2012-10-18T19:34:39.830 回答
1

看看实际的代码，他们正在使用pixels[i]but pixels[i+1]，pixels[i+2]并且注释掉了pixels[i+3]。一次是四个值，而不仅仅是一个。

在图像像素的这种情况下，实际上非常常见的是增加四（如果数据中完全不存在 alpha，则增加三），因为顺序以 RGBA 形式出现。

如果您查看评论，他们甚至会指出这个事实（去掉了不必要的部分）：

pixels[i  ]                     // red
pixels[i+1]                     // green
pixels[i+2]                     // blue
pixels[i+3]                     // alpha

如果您考虑数组中的布局，这很有意义：

Array:       [r0,g0,b0,a0,r1,g1,b1,a1,r2,...etc]
Positions:     0, 1, 2, 3, 4, 5, 6, 7, 8

如果我们要始终首先获得红色，我们需要从0到4到。8

于 2012-10-18T19:35:13.590 回答
0

循环的每次迭代都对集合中的四个项目的序列进行操作，从 的当前值开始i。

因此下一个序列的开始是i + 4。

于 2012-10-18T19:33:23.293 回答
0

ImageData 对象基本上是一个像素数组。

在 CSS 中，当您设置时，color : rgba( 255, 40, 30, 1 );您将设置红色、绿色、蓝色和 alpha（透明度）。这就是每个像素的顺序。

但是所有像素都存储为四种颜色，在一条直线上背靠背。

所以一个 2x2 的黑白图像看起来像这样：

var checkerboard = [ 0, 0, 0, 1, 255, 255, 255, 1, 255, 255, 255, 1, 0, 0, 0, 1 ];

这是使左上角像素变为黑色的 3 个 rgb（1 个表示 100% 可见），然后是右上角的白色，然后是左下角的白色，然后是右下角的黑色。

因此，当您处理修改单个像素的代码时，您将包括构成 1 个像素的所有颜色/alpha 通道。

于 2012-10-18T19:38:43.117 回答