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>
Я хочу сделать это для многих изображений, используя холст. Поддерживает ли какой-либо браузер ускоренный аппаратный способ измерения разницы между двумя изображениями, загруженными в холст?
, несмотря на то, что некоторые браузеры не поддерживают его, будет ли webgl вариантом? – GameAlchemist
Да, просто ищет что-то, что будет работать в * любом браузере на этом этапе. –
ОК, и насколько критична производительность? потому что вышеприведенный код довольно быстр, я готов поспорить, что он может работать ниже 100 мс для HD-изображения на рабочем столе. – GameAlchemist