vue使用exif獲取圖片經緯度

我上一篇文章寫了怎么壓縮圖片和旋轉。這篇寫一下怎么看圖片的經緯度

注意！！！

只有原圖有大量的元數據信息。通過拍照軟件如：b612等，拍攝的照片是軟件處理過的，所以一定要使用原圖來擦查詢

下面貼以下代碼。

<template>
  <div>
    <input type="file" id="upload" accept="image" @change="upload" />
    <span>{{textData}}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      picValue: {},
      headerImage: '',
      textData:''
    };
  },
  components: {},
  methods: {
    upload(e) {
      console.log(e);
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      this.picValue = files[0];
      this.imgPreview(this.picValue);
    },
    imgPreview(file) {
      let self = this;
      let Orientation;
      //去獲取拍照時的信息，解決拍出來的照片旋轉問題
      self.EXIF.getData(file, function() {
        Orientation = self.EXIF.getTag(this, 'Orientation');
      });
      // 看支持不支持FileReader
      if (!file || !window.FileReader) return;

      if (/^image/.test(file.type)) {
        // 創建一個reader
        let reader = new FileReader();
        // 將圖片2將轉成 base64 格式
        reader.readAsDataURL(file);
        // 讀取成功后的回調
        reader.onloadend = function() {
          let result = this.result;
          let img = new Image();
          img.src = result;
          self.postImg(file);
        };
      }
    },
    postImg(val) {
      //這里寫接口
      let self = this;
      // document.getElementById('upload')
      // this.EXIF.getData(val,  function(r) {
      let r = this.EXIF.getAllTags(val);
      const allMetaData = r;
      let direction;
      if (allMetaData.GPSImgDirection) {
        const directionArry = allMetaData.GPSImgDirection; // 方位角
        direction = directionArry.numerator / directionArry.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);
      }
      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);
      }
      self.textData = '我是Longitude' + Longitude + ' ====== '+"我是Latitude" + Latitude
      console.log('我進來了', direction, Longitude, Latitude);
      console.log('allMetaData', allMetaData);
      //接口 axios
      // });
    }
  }
};
</script>

這個功能是下載的exif.js文件，也可以通過npm安裝依賴。不過都要掛在到原型鏈上。有問題請在評論區留言