index.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>EXIF example with inline EXIF info</title>
  8. </head>
  9. <body>
  10. <img src="DSCN0614_small.jpg" id="img1" />
  11. <pre>Make and model: <span id="makeAndModel"></span></div>
  12. <br/>
  13. <img src="Bush-dog.jpg" id="img2" />
  14. <pre id="allMetaDataSpan"></pre>
  15. <br/>
  16. <img src="Bloated-Hero.jpg" id="img3" /><br/>
  17. <pre id="img3WithXmpMetaData"></pre>
  18. <script type="text/javascript" src="../exif.js"></script>
  19. <script>
  20. "use strict";
  21. window.onload=getExif;
  22. function getExif() {
  23. var img1 = document.getElementById("img1");
  24. EXIF.getData(img1, function() {
  25. var make = EXIF.getTag(this, "Make");
  26. var model = EXIF.getTag(this, "Model");
  27. var makeAndModel = document.getElementById("makeAndModel");
  28. makeAndModel.innerHTML = `${make} ${model}`;
  29. });
  30. var img2 = document.getElementById("img2");
  31. EXIF.getData(img2, function() {
  32. var allMetaData = EXIF.getAllTags(this);
  33. var allMetaDataSpan = document.getElementById("allMetaDataSpan");
  34. allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, "\t");
  35. });
  36. var img3 = document.getElementById("img3");
  37. // EXIF.enableXmp();
  38. EXIF.getData(img3, function() {
  39. var allMetaData = EXIF.getAllTags(this);
  40. var img3WithXmpMetaData = document.getElementById("img3WithXmpMetaData");
  41. img3WithXmpMetaData.innerHTML = JSON.stringify(allMetaData, null, "\t");
  42. });
  43. }
  44. </script>
  45. </body>
  46. </html>