Loading ...

Visualizzare le differenze tra due immagini in Javascript

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!