js 获取图片经纬度及写经纬度

piexifjs 写入照片头文件_忘川追影的博客-CSDN博客_piexifjs

感谢这位楼主

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>写入图片头文件</title>
  </head>
  <body>
    <input type="file" id="files" />
    <button
      type="button"
      id="btn1"
      style="position: absolute; top: 5px; right: 10px"
    >
      读取图片头文件
    </button>
    <div id="resized"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/exif-js/2.3.0/exif.min.js"></script>
    <script src="./piexif.js"></script>
    <script>
      function handleFileSelect(evt) {
        var file = evt.target.files[0];
 
        var zeroth = {};
        var exif = {};
        var gps = {};
        zeroth[piexif.ImageIFD.Make] = 'lyf';
 
        //经纬度写入
        var lat = 61.123456789;
        var lng = 25.123456789;
        gps[piexif.GPSIFD.GPSLatitudeRef] = lat < 0 ? 'S' : 'N';
        gps[piexif.GPSIFD.GPSLatitude] = piexif.GPSHelper.degToDmsRational(lat);
        gps[piexif.GPSIFD.GPSLongitudeRef] = lng < 0 ? 'W' : 'E';
        gps[piexif.GPSIFD.GPSLongitude] = piexif.GPSHelper.degToDmsRational(
          lng
        );
        //方位角写入
        gps[piexif.GPSIFD.GPSImgDirection] = [123456, 100];
 
        var exifObj = { '0th': zeroth, Exif: exif, GPS: gps };
        var exifStr = piexif.dump(exifObj);
 
        var reader = new FileReader();
        reader.onload = function (e) {
          var inserted = piexif.insert(exifStr, e.target.result);
 
          var image = new Image();
          image.src = inserted;
          image.width = 200;
          image.id = 'img1';
          var el = $('<div></div>').append(image);
          $('#resized').prepend(el);
        };
        reader.readAsDataURL(file);
      }
 
      document
        .getElementById('files')
        .addEventListener('change', handleFileSelect, false);
 
      document.getElementById('btn1').onclick = function () {
        EXIF.getData(document.getElementById('img1'), function () {
          const allMetaData = EXIF.getAllTags(this);
 
          let direction;
          if (allMetaData.GPSImgDirection) {
            const directionArry = allMetaData.GPSImgDirection; // 方位角
            direction = directionArry.numerator / directionArry.denominator;
          }
 
          // 经度 numerator(数值) denominator(自身的进制) 三个参数 度、分、秒换算,保留小数点后两位
          let Longitude;
          if (allMetaData.GPSLongitude) {
            const LongitudeArry = allMetaData.GPSLongitude;
            const longLongitude =
              LongitudeArry[0].numerator / LongitudeArry[0].denominator +
              LongitudeArry[1].numerator / LongitudeArry[1].denominator / 60 +
              LongitudeArry[2].numerator / LongitudeArry[2].denominator / 3600;
            Longitude = longLongitude.toFixed(8);
          }
 
          // 纬度 numerator(数值) denominator(自身的进制) 三个参数 度、分、秒换算 ,保留小数点后两位
          let Latitude;
          if (allMetaData.GPSLatitude) {
            const LatitudeArry = allMetaData.GPSLatitude;
            const longLatitude =
              LatitudeArry[0].numerator / LatitudeArry[0].denominator +
              LatitudeArry[1].numerator / LatitudeArry[1].denominator / 60 +
              LatitudeArry[2].numerator / LatitudeArry[2].denominator / 3600;
            Latitude = longLatitude.toFixed(8);
          }
 
          let originalTime;
          if (allMetaData.DateTimeOriginal) {
            originalTime = allMetaData.DateTimeOriginal; // 时间
          }
 
          console.log('照片EXIF信息', allMetaData);
          console.log('经度,纬度,方位角', Longitude, Latitude, direction);
        });
      };
    </script>
  </body>
</html>

下面才是我的代码,红色字体获取图片经纬度、拍摄日期

layui.upload.render({

    elem: op.elem,

    url : basePath + '/admin/home/uploadFilesB2Info.do',

    accept: 'images',

    acceptMime: 'image/*',

    multiple: true,

    auto: false,

    bindAction: op.bindAction,

    before: function(obj){

    },

    choose: function(obj){

        //读取本地文件

        obj.preview(function(index, file, result){            

            //获取照片EXIF信息

            EXIF.getData(file, function () {

                const allMetaData = EXIF.getAllTags(this);

                let direction;

                if (allMetaData.GPSImgDirection) {

                    const directionArry = allMetaData.GPSImgDirection; // 方位角

                    direction = directionArry.numerator / directionArry.denominator;

                }

                // 经度 numerator(数值) denominator(自身的进制) 三个参数 度、分、秒换算,保留小数点后两位

                let Longitude;

                if (allMetaData.GPSLongitude) {

                    const LongitudeArry = allMetaData.GPSLongitude;

                    const longLongitude =

                    LongitudeArry[0].numerator / LongitudeArry[0].denominator +

                    LongitudeArry[1].numerator / LongitudeArry[1].denominator / 60 +

                    LongitudeArry[2].numerator / LongitudeArry[2].denominator / 3600;

                    Longitude = longLongitude.toFixed(8);

                }

                // 纬度 numerator(数值) denominator(自身的进制) 三个参数 度、分、秒换算 ,保留小数点后两位

                let Latitude;

                if (allMetaData.GPSLatitude) {

                    const LatitudeArry = allMetaData.GPSLatitude;

                    const longLatitude =

                    LatitudeArry[0].numerator / LatitudeArry[0].denominator +

                    LatitudeArry[1].numerator / LatitudeArry[1].denominator / 60 +

                    LatitudeArry[2].numerator / LatitudeArry[2].denominator / 3600;

                    Latitude = longLatitude.toFixed(8);

                }

                let originalTime;

                if (allMetaData.DateTimeOriginal) {

                    originalTime = allMetaData.DateTimeOriginal; // 时间

                }

                console.log('照片EXIF信息', allMetaData);

                console.log('经度,纬度,方位角', Longitude, Latitude, direction);

                console.log('拍摄日期', originalTime);

            });            

        });      

    },

    done: function(res, index, upload){    

    },

    error: function(index, upload){

    }

});


 

imgUpload({

    elem: '#qtImgUpload',

    bindAction: '#qtImgUploadAction',

    listview: "#galleryImgList",

    table:'tableOther',

    file_desc: '其它',

    callbackfun: function(){       

    }

});

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值