对于通过 JSON 的每个 LOOP。Stringify 图像的 EXIF 数据

Question

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

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

   `<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是 object
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", }

预期的 output 应该看起来像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'));
  });
})