JS硬件加速圖像比較

我可以在畫布上加載的兩幅圖像之間的差異衡量的東西，如：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>

我要爲大量的圖片做到這一點，利用帆布。任何瀏覽器是否支持用硬件加速的方式來衡量在畫布中加載的兩幅圖像之間的差異？

來源

2014-01-14 Jackson Pauls

儘管一些瀏覽器不支持它，webgl將是一個選項？ – GameAlchemist

是的，只是在這個階段尋找能夠在* any *瀏覽器中工作的東西。 –

好的，表現有多關鍵？因爲上面的代碼非常快，我敢打賭，它可以運行在桌面上的高清圖像100ms以下。 – GameAlchemist

我找不到辦法做到這一點 - 猜測答案是否定的。

來源

2014-01-20 21:03:28

JS硬件加速圖像比較

回答

相關問題