Visualizzare le differenze tra due immagini in Javascript

Mattepuffo's logo
Visualizzare le differenze tra due immagini in Javascript

Visualizzare le differenze tra due immagini in Javascript

Programmazione, Javascript - AJAX

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!

Condividi

Commentami!