Exemple d'extraction des métadonnées d'une image avec Exif JS

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- exif js -->
    <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
    <style>
        table,
        td {
            border: 1px solid #333;
        }

        thead,
        tfoot {
            background-color: #333;
            color: #fff;
        }
    </style>
    <script>

        // Attend que la page se charge
        window.onload = getExif;

        function getExif() {
            // L'image
            var img = document.getElementById("img");
            EXIF.getData(img, function () {
                //Constructeur
                var make = EXIF.getTag(this, "Make");
                //Modèle
                var model = EXIF.getTag(this, "Model");
                //Date et heure
                var dateTime = EXIF.getTag(this, "DateTime");
                //Logiciel
                var software = EXIF.getTag(this, "Software");
                //Orientation de l'image
                var orientation = EXIF.getTag(this, "Orientation");

                /* Les lignes du tableau */
                var manufacturerElement = document.getElementById("manufacturer");
                manufacturerElement.innerHTML = `${make}`;

                var modelElement = document.getElementById("model");
                modelElement.innerHTML = `${model}`;

                var dateTimeElement = document.getElementById("dateTime");
                dateTimeElement.innerHTML = `${dateTime}`;

                var softwareElement = document.getElementById("software");
                softwareElement.innerHTML = `${software}`;

                var orientationElement = document.getElementById("orientation");
                orientationElement.innerHTML = `${orientation}`;

                /* Format brute des métadonnées EXIF en JSON*/
                var allExif = EXIF.getAllTags(this);
                var allExifElement = document.getElementById("allExif");
                allExifElement.innerHTML = JSON.stringify(allExif, null, "\t");
            });
        }

    </script>

</head>

<body>

    <img id="img" src="https://raw.githubusercontent.com/ianare/exif-samples/master/jpg/Canon_40D.jpg" alt="">


    <table>
        <thead>
            <tr>
                <th colspan="2">Exif</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Constructeur</td>
                <td id="manufacturer"></td>
            </tr>
            <tr>
                <td>Modèle</td>
                <td id="model"></td>
            </tr>
            <tr>
                <td>Date</td>
                <td id="dateTime"></td>
            </tr>
            <tr>
                <td>Logiciel</td>
                <td id="software"></td>
            </tr>
            <tr>
                <td>Orientation</td>
                <td id="orientation"></td>
            </tr>
        </tbody>
    </table>

    <h2>Exif brute</h2>
    <pre id="allExif"></pre>

</body>

</html>

Commentaires