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!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2612 articoli
310 commenti
19 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy