0

この記事では、ループ内でi1 ではなく 4 ずつインクリメントされるのはなぜですか? チャンゴンを試しi+=4てみましたが、うまくいき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

pixels[i]実際pixels[i+1]のコードを見てpixels[i+2]くださいpixels[i+3]。これらは一度に 4 つの値であり、1 つだけではありません。

画像からのピクセルのこのコンテキストでは、順序が RGBA として入力されるため、実際には 4 (データにアルファが完全に存在しない場合は 3) ずつインクリメントするのが非常に一般的です。

コメントを見ると、彼らはこの事実を指摘しています (不要な部分は削除されています):

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 に答える
1

for ループでは、1 つのピクセルを構成する赤、緑、青、およびアルファ チャネルを表す配列内の 4 つのスポットが変更されるためです。for ループは 4 ずつインクリメントして、次のピクセルの赤、緑、青、およびアルファ チャネルの次のセットにジャンプします。

于 2012-10-18T19:34:39.830 に答える
1

私には、i=赤、i+1=緑、i+2=青、i+3=アルファのように見えます。したがって、i+4 は再び赤になります。そのため、for ループは配列全体を 1 回ではなく 4 回反復して、個々のピクセルを区別します。

于 2012-10-18T19:32:25.880 に答える
0

ImageData オブジェクトは、基本的にピクセルの配列です。

CSS では、設定color : rgba( 255, 40, 30, 1 );すると、赤、緑、青、およびアルファ (透明度) が設定されます。それが各ピクセルの順序です。

しかし、すべてのピクセルは 4 色として保存され、直線で背中合わせになっています。

したがって、2x2 の白黒画像は次のようになります。

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

これは、左上のピクセルを黒にする 3 つの RGB (および 100% 表示の場合は 1 つ)、右上に白、左下に白、右下に黒が続きます。

したがって、個々のピクセルを変更するコードを扱う場合、1 ピクセルを構成するすべてのカラー/アルファ チャンネルを含めることになります。

于 2012-10-18T19:38:43.117 に答える
0

ループの各反復は、 の現在の値から開始して、コレクションの 4 つの項目のシーケンスで動作しますi。

したがって、次のシーケンスの開始は ですi + 4。

于 2012-10-18T19:33:23.293 に答える