7

キャンバス画像のすべてのピクセルをスキャンし、色などをいじる必要があります。最適なパフォーマンスを得るには、すべてのデータを一度に取得して、配列を介して作業する必要がありますか? または、作業中に各ピクセルを呼び出す必要があります。

だから基本的に...

data = context.getImageData(x, y, height, width);

VS

data = context.getImageData(x, y, 1, 1); //in a loop height*width times.
4

3 に答える 3

5

GameAlchemist が言ったことに加えて、ピクセルのすべての色を同時に取得または設定したいが、エンディアンをチェックしたくない場合は、次を使用できますDataView。

var data = context.getImageData(0, 0, canvas.width, canvas.height);
var view = new DataView(data.data.buffer);

// Read or set pixel (x,y) as #RRGGBBAA (big endian)
view.getUint32(4 * (x + y*canvas.width));
view.setUint32(4 * (x + y*canvas.width), 0xRRGGBBAA);

// Read or set pixel (x,y) as #AABBGGRR (little endian)
view.getUint32(4 * (x + y*canvas.width), true);
view.setUint32(4 * (x + y*canvas.width), 0xAABBGGRR, true);

// Save changes
ctx.putImageData(data, 0, 0);
于 2016-08-29T21:20:51.010 に答える
1

正確に何をしているかにもよりますが、一度にすべてを取得してからループすることをお勧めします。

すべてを一度にグラブする方が、ピクセルごとにグラブするよりも高速です。これは、配列を検索する方がキャンバスをピクセルごとに検索するよりもはるかに高速であるためです。

本当にスピードが必要な場合は、Web ワーカーを調べてください。キャンバスの特定のセクションを取得するようにそれぞれを設定できます。これらは同時に実行できるため、CPU をより有効に活用できます。

getImageData()関数を使用した私の経験では、一度にすべてを取得する場合と個別に取得する場合の違いに気付くほど遅くはありません。

于 2013-10-21T16:18:25.277 に答える