JSFiddle - React, Tailwind, and code Playground

by meetravi

HTML

<script src="https://raw.githubusercontent.com/exif-js/exif-js/master/exif.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>EXIF example with inline EXIF info</title>
</head>
<body>

    <img src="https://placekitten.com/408/287" id="img1" />
    <pre>Make and model: <span id="makeAndModel"></span></div>
    <br/>

    <img src="https://placekitten.com/200/287" id="img2" />
    <pre id="allMetaDataSpan"></pre>
    <br/>

    <img src="https://placekitten.com/200/139" id="img3" /><br/>
    <pre id="img3WithXmpMetaData"></pre>

    <script type="text/javascript" src="exif.js"></script>
    <script>
        window.onload=getExif();

        function getExif() {
        alert('getExif');
            var img1 = document.getElementById("img1");
            exif.getData(img1, function() {
                var make = EXIF.getTag(this, "Make");
                var model = EXIF.getTag(this, "Model");
                alert(make);
                
                var makeAndModel = document.getElementById("makeAndModel");
                makeAndModel.innerHTML = `${make} ${model}`;
            });

            var img2 = document.getElementById("img2");
            exif.getData(img2, function() {
                var allMetaData = EXIF.getAllTags(this);
                var allMetaDataSpan = document.getElementById("allMetaDataSpan");
                allMetaDataSpan.innerHTML = JSON.stringify(allMetaData, null, "\t");
            });

            var img3 = document.getElementById("img3");
            // EXIF.enableXmp();
            exif.getData(img3, function() {
                var allMetaData = EXIF.getAllTags(this);
                var img3WithXmpMetaData = document.getElementById("img3WithXmpMetaData");
                img3WithXmpMetaData.innerHTML = JSON.stringify(allMetaData, null, "\t");
        ...