Javascript JS硬件加速图像比较

我可以通过以下方式测量画布中加载的两个图像之间的差异：

<canvas id="canvas1" width="255" height="255"></canvas>
<canvas id="canvas2" width="255" height="255"></canvas>

<script>

// THIS FUNCTION IS THE MOST RELEVANT BIT:
function getSumSq (ctx1, ctx2) {
  var
    i,
    sumSq = 0,
    w = 255, h= 255,
    numPixelComponents = w * h * 4,
    data1 = ctx1.getImageData(0, 0, w, h).data,
    data2 = ctx2.getImageData(0, 0, w, h).data;

  for (i = 0; i < numPixelComponents - 3; i += 4) {
    sumSq += Math.pow(data1[i] - data2[i], 2) +
      Math.pow(data1[i + 1] - data2[i + 1], 2) +
      Math.pow(data1[i + 2] - data2[i + 2], 2);
    // no transparency so ignore i + 3, the alpha channel.
  }

  return sumSq;
}

var c1 = document.getElementById('canvas1');
var ctx1 = c1.getContext('2d');
var img1 = new Image();
img1.src = 'img1.png';
img1.onload = function() {
  ctx1.drawImage(img1, 0, 0);
  var c2 = document.getElementById('canvas2');
  var ctx2 = c2.getContext('2d');
  var img2 = new Image();
  img2.src = 'img2.png';
  img2.onload = function() {
    ctx2.drawImage(img2, 0, 0);
    console.log(getSumSq(ctx1, ctx2));
  };
};

</script>

//此功能是最相关的位：
函数getSumSq（ctx1，ctx2）{
变量
我
sumSq=0，
w=255，h=255，
numPixelComponents=w*h*4，
data1=ctx1.getImageData（0,0,w,h）.data，
data2=ctx2.getImageData（0,0,w,h）；
对于（i=0；i

---

我想用画布为很多图像做这个。是否有任何浏览器支持硬件加速方式来测量画布中加载的两个图像之间的差异？

我找不到一种方法来做到这一点-猜测答案是否定的。

尽管有些浏览器不支持它，webgl是否是一种选择？是的，只是在现阶段寻找可以在任何浏览器中工作的东西。好的，性能有多重要？因为上面的代码速度很快，我敢打赌，对于桌面上的高清图像，它可以在100ms以下运行。谢谢你看这个。性能至关重要，速度越快越好。。。