<!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
Enregistrer un commentaire