3

context.createImageData(width, height)現在、HTML5キャンバスでRGBA画像を作成するために使用しています。ただし、画像のアルファ値を操作する必要はないため、作成する配列は必要以上に大きくなります。RGB画像データを作成する同様の方法を使用する方法はありませんか?

4

1 に答える 1

6

キャンバスを使用することはできません。

Canvas は、仕様に従って常に RGBA バッファを提供します(RGB を生成する唯一の例外はtoDataURL、JPEG を生成するために使用する場合です)。

単純にアルファ チャネルを無視して値 255 のままにするか、操作してデータをキャンバスのピクセル配列にコピーする RGB 値のみでカスタム Typed Array バッファを作成することができます。

var myBuffer = new ArrayBuffer(3 * w * h);    /// calc buffer size in bytes
var pixels = new Uint8ClampedArray(myBuffer); /// view for buffer

Uint8ClampedArrayキャンバスが使用しているのと同じタイプのバッファ ビューです。

pixels次に、データの準備ができたら、値を画像データにコピーします。

var imageData = ctx.createImageData(w, h);   /// create a canvas buffer (RGBA)
var data = imageData.data;                   /// view for the canvas buffer
var len = data.length;                       /// length of buffer
var i = 0;                                   /// cursor for RGBA buffer
var t = 0;                                   /// cursor for RGB buffer

for(; i < len; i += 4) {
    data[i]     = pixels[t];     /// copy RGB data to canvas from custom array
    data[i + 1] = pixels[t + 1];
    data[i + 2] = pixels[t + 2];
    data[i + 3] = 255;           /// remember this one with createImageBuffer

    t += 3;
}

ctx.putImageData(imageData, 0, 0); /// put data to canvas

(もちろん、2 つのバッファーの幅と高さが一致する必要があります)。

このアプローチが有益かどうかは、画像を多く処理するかどうかに大きく依存します。そうでない場合、これはより多くのメモリを使用するだけであり、パフォーマンスに大きなメリットはありません。

処理する方法と内容に応じてUint32Array、カスタム バッファーで を使用する可能性もあります ( に加えて、Uint8ClampedArrayバッファーに必要な数のビューを含めることができます)。これは、ピクセルの置き換えなどに役立ちます。

于 2013-11-09T05:23:12.233 に答える