2014-01-14 3 views
0

я могу получить меру различия между двумя изображениями, загруженных в холсте с чем-то вроде: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> 

Я хочу сделать это для многих изображений, используя холст. Поддерживает ли какой-либо браузер ускоренный аппаратный способ измерения разницы между двумя изображениями, загруженными в холст?

+0

, несмотря на то, что некоторые браузеры не поддерживают его, будет ли webgl вариантом? – GameAlchemist

+0

Да, просто ищет что-то, что будет работать в * любом браузере на этом этапе. –

+0

ОК, и насколько критична производительность? потому что вышеприведенный код довольно быстр, я готов поспорить, что он может работать ниже 100 мс для HD-изображения на рабочем столе. – GameAlchemist

ответ

0

Я не могу найти способ сделать это - угадать ответ - нет.

Смежные вопросы