Visualizzare le differenze tra due immagini in Javascript
Ho trovato una libreria per Javascript, basata su canvas, che ci permette di visualizzare le differenze che ci sono tra due immagini: js-imagediff!
Possiamo usarla sia nel browser (come nel nostro esempio) che in Node.js.
Scaricate il file Javascript dal sito; scaricate due immagini (possibilmente simili, oppure sempre le trovate sempre sul sito).
Infine mettete tutto insieme:
<!DOCTYPE html>
<html>
<head>
<title>JS-ImageDiff</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="imagediff.js"></script>
</head>
<body>
<div id="content">
<div id="demo">
<img id="a" alt="example image one" src="a.jpg">
<img id="b" alt="example image two" src="b.jpg">
</div>
<script type="text/javascript">
var a = document.getElementById('a');
var b = document.getElementById('b');
var demo = document.getElementById('demo');
function difference() {
var diff;
var canvas;
var context;
if (!a.complete || !b.complete) {
setTimeout(difference, 10);
} else {
diff = imagediff.diff(a, b);
canvas = imagediff.createCanvas(diff.width, diff.height);
context = canvas.getContext('2d');
context.putImageData(diff, 0, 0);
demo.appendChild(canvas);
}
}
difference();
</script>
</div>
</body>
</html>
Visualizzando la pagina vedrete tre immagini: le due messe a confronto, e una terza che mostra le differenze.
Enjoy!
javascript js-imagediff canvas
Commentami!