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来提高效率。我建议使用canvas 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

每个频道大约需要200毫秒才能完成整个操作，好消息是它可能是大图像的同一时间。

如何在javascript中有效地从数组中复制跨步数据？

1 个答案: