なぜ設定HTML5のCanvasPixelArray値ォ遅い方よろしくお願いいたしますが早い？

Question

うことによりいくつかの動的な視覚効果をHTMLの5キャンバス'ピクセル操作かもしれませんが、同じ走る問題設定のピクセルのCanvasPixelArrayはォ遅くなります。

たとえば、私のようなコード:

imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    imageData.data[i] = buffer[i];
    imageData.data[i + 1] = buffer[i + 1];
    imageData.data[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

プロファイリングクロームに見ると、44%に比べて遅以下のコードがCanvasPixelArrayが使用されていない。

tempArray = new Array(500 * 500 * 4);
imageData = ctx.getImageData(0, 0, 500, 500);

for (var i = 0; i < imageData.length; i += 4){
    tempArray[i] = buffer[i];
    tempArray[i + 1] = buffer[i + 1];
    tempArray[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

私の推測では、この減速により変換のためにJavascriptを兼内部の符号なし8ビット整数として使用されるCanvasPixelArray.

1. この推測して正しいですか。
2. 直しとかは出来ないんですか時間を過ごした設定値をCanvasPixelArray?

Answer 1

data画素アレイへの参照をキャッシュしてみてください。あなたの減速はimageData.dataに追加のプロパティのアクセスに起因する可能性があります。より詳細な説明のためにこの記事を参照してください。

例えば。これは、より速く、あなたが現在持っているということである必要があります。

var imageData = ctx.getImageData(0, 0, 500, 500),
    data = imageData.data,
    len = data.length;

for (var i = 0; i < len; i += 4){
 data[i] = buffer[i];
 data[i + 1] = buffer[i + 1];
 data[i + 2] = buffer[i + 2];
}

ctx.putImageData(imageData, 0, 0);

Answer 2

これはあなたを助けている場合、あなたはピクセルを操作したいので、私は知らないが、私にとっては、Firefox 3.6.8で、putImageDataにだけ呼び出しが任意のピクセル操作を行うことなく、非常に、非常に遅かったです。私の場合、私はちょうどgetImageDataと一緒に保存された画像の以前のバージョンを復元したかったです。遅すぎます。

その代わり、私が代わりにtoDataUrl / drawImageメソッドを使用してうまく動作するようにそれを得ました。私にとって、それは私がのMouseMoveイベントを処理中にそれを呼び出すことができることを十分に速く働いています：

保存するには、

savedImage = new Image()  
savedImage.src = canvas.toDataURL("image/png")

復元するには：

ctx = canvas.getContext('2d')  
ctx.drawImage(savedImage,0,0)

Answer 3

だって一種の"blit転送の"う drawImage またはすべて-アット-ワン putImageData できます。ループの四万回ピピクセルを個別ではなく、巨大な"blit転送の操作が遅くなる--だけではなく、Javascript;-).

Answer 4

奇妙なことに、2Dオブジェクト配列をループは、高速1DアレイオフセットCALCSなしオブジェクト以下です。それに応じてフォーマット、それは（私のテストでは、それはより速く20倍だった）ことができますかどうかを確認します。

（ヘッドアップ：！このスクリプトは、あなたがそれを実行した場合、数分間じっとブラウザをクラッシュさせ、そのことをやらせることができ） http://jsfiddle.net/hc52jx04/16/する

function arrangeImageData (target) {

var imageCapture = target.context.getImageData(0, 0, target.width, target.height);
var imageData = {
    data: []
};
imageData.data[0] = [];
var x = 0;
var y = 0;
var imageLimit = imageCapture.data.length;

for (var index = 0; index < imageLimit; index += 4) {

    if (x == target.width) {
        y++;
        imageData.data[y] = [];
        x = 0;
    }

    imageData.data[y][x] = {
        red: imageCapture.data[index],
        green: imageCapture.data[index + 1],
        blue: imageCapture.data[index + 2],
        alpha: imageCapture.data[index + 3]
    };
    x++;
}
return imageData;

}


function codifyImageData (target, data) {

var imageData = data.data;

var index = 0;
var codedImage = target.context.createImageData(target.width, target.height);

for (var y = 0; y < target.height; y++) {

    for (var x = 0; x < target.width; x++) {

        codedImage.data[index] = imageData[y][x].red;
        index++;
        codedImage.data[index] = imageData[y][x].green;
        index++;
        codedImage.data[index] = imageData[y][x].blue;
        index++;
        codedImage.data[index] = imageData[y][x].alpha;
        index++;
    }

}

return codedImage;

}

詳細情報：のhttp：/ /discourse.wicg.io/t/why-a-straight-array-for-canvas-getimagedata/1020/6する