JavaScriptから配列からストライドされたデータを効率的にコピーするには？

Question

canvas.context.getImageData呼び出しから取得したRGBAデータの配列を想像してください。例えば抽出する方法はありますか？それを通って歩くよりも効率的な方法でそれから2番目のチャネル？

var source = canvas.context.getImageData(0, 0, 100, 100); 
for(var i=0; i != data.length; ++i){ 
    target[i] = source[i*4 + channelOffset]; 
} 

Answer 1

あなたのコードがどれほど効率的かわかりませんが、imageDataをループすることで効率が上がらないことはほぼ確実です。私は何を示唆していることは別のキャンバスにチャンネルを抽出するために、キャンバスglobalCompositeOperationを使用している、私はこのペンで実行されている例があります。

ここ

http://codepen.io/Aeyos/pen/egyEQQ

も：

var canvas1 = document.querySelector('#canvas1'); 
 
var canvas2 = document.querySelector('#canvas2'); 
 
var canvas3 = document.querySelector('#canvas3'); 
 

 
var img1 = document.querySelector('#img1'); 
 

 
var ctx1 = canvas1.getContext('2d'); 
 
var ctx2 = canvas2.getContext('2d'); 
 
var ctx3 = canvas3.getContext('2d'); 
 

 
ctx1.drawImage(img1, 0, 0); 
 
ctx1.fillStyle = "#F00"; 
 
ctx1.globalCompositeOperation = 'multiply'; 
 
ctx1.fillRect(0, 0, 435, 318); 
 

 
ctx2.drawImage(img1, 0, 0); 
 
ctx2.fillStyle = "#0F0"; 
 
ctx2.globalCompositeOperation = 'multiply'; 
 
ctx2.fillRect(0, 0, 435, 318); 
 

 
ctx3.drawImage(img1, 0, 0); 
 
ctx3.fillStyle = "#00F"; 
 
ctx3.globalCompositeOperation = 'multiply'; 
 
ctx3.fillRect(0, 0, 435, 318); 
 

 
//http://wallpaper-gallery.net/single/image/image-13.html

canvas { 
 
    border: 1px dashed gray; 
 
}

<img id="img1" src="http://wallpaper-gallery.net/images/image/image-13.jpg" /><canvas width="435" height="318" id="canvas1"></canvas> 
 
<canvas width="435" height="318" id="canvas2"></canvas> 
 
<canvas width="435" height="318" id="canvas3"></canvas>

globalcompositeOperationを次のいずれかに変更することもできます。

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

各チャネルは操作を完了するのに約200msかかりますが、大規模な画像ではおそらく同じタイミングです。