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

Question

我有一张图片，一旦我点击它，它就会显示得更大，旁边有 EXIF 数据。我正在使用 JSON.strigify 获取 EXIF 数据，然后我需要显示该字符串中的任何内容，以便在我的 HTML 中添加到<span>标签id='makeAndModel'中。我想对每个箭头函数都这样做，但我不确定具体如何。   `<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'));

  });

})