javascript - 对于每个LOOP通过JSON.Stringify图像的EXIF数据

Question

我有一个图像，一旦我点击它，它就会显示得更大，旁边有 EXIF 数据。 我使用 JSON.strigify 获取 EXIF 数据，之后我需要显示该字符串中要添加到 <span> 中的所有内容。标记为 id='makeAndModel'在我的 HTML 中。

我想对每个箭头函数执行此操作，但我不确定具体如何执行。

   `<div id="imageContainer"></div>
      <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="current">
        <pre>Make and model: <span id="makeAndModel"></span></pre>
    </div>`

   <--Taking the src attribute and creating the images-->
    let $modal = $('.modal')
    let $img = $("#imageContainer img");
      $img.click(function(){
        $('.modal-content').attr('src', $(this).attr('src'));
        $modal.css('display', 'block')

      <--EXIF data-->
       var imgCurrent = document.getElementById('current');
       EXIF.getData(imgCurrent,function(){
         let result = $('#makeAndModel')
         let make= JSON.stringify(EXIF.getAllTags(this));


    });

    let $makeAndModel = $('#makeAndModel');
    $makeAndModel.text(`${make}`)
  })

`

当前在控制台中输出 let make是对象
let make = { "Orientation":1, "YCbCrPositioning":1, "XResolution":72, "YResolution":72, "ResolutionUnit":2, "Make":"samsung", "Model":"SM-G965F", "Software":"G965FXXU2CSB9", "DateTime":"2019:03:18 18:29:28", "ExifIFDPointer":213, "GPSInfoIFDPointer":833, "ExposureTime":0.02, "FNumber":2.4, "ExposureProgram":"Normal program" ,"ISOSpeedRatings":160, "ExifVersion":"0220", "DateTimeOriginal":"2019:03:18 18:29:28", "DateTimeDigitized":"2019:03:18 18:29:28", }

预期的输出应该是这样的 Make and Model : Orientation:1, YCbCrPositioning:1, XResolution:72, YResolution:72,

等等，就像当您单击图像的“属性”->“详细信息”选项卡时

Answer 1

这样的东西可以工作

let $modal = $('.modal')
let $img = $("#imageContainer img");
$img.click(function() {
  $('.modal-content').attr('src', $(this).attr('src'));
  $modal.css('display', 'block')
  var imgCurrent = document.getElementById('current');
  EXIF.getData(imgCurrent, function() {
    let result = $('#makeAndModel')
    let make = EXIF.getAllTags(this);
    let props = Object.entries(make).map(([property, value]) => {
      return `${property}: ${value}`;
    });
    result.text(props.join('\n'));
  });
})