如何從JavaScript中有效地複製數組中的步進數據？

Question

想象一下從canvas.context.getImageData調用中獲得的一組RGBA數據。有沒有辦法提取例如第二個渠道是以比它更有效的方式走出來的嗎？

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才能完成操作，好消息是它可能是大圖像的同一時間。