vue Sample code for obtaining latitude and longitude of a picture using exif

My last article wrote about how to compress pictures and rotate them. How to look at the latitude and longitude of the picture in this article

Attention! ! !

Only the original image has a lot of metadata information. Through photographing software such as: b612, the photographs are processed by the software, so 1 must use the original image to wipe the query

The following code is posted below.

<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;
   // To get the information when taking pictures and solve the rotation problem of the taken photos 
   self.EXIF.getData(file, function() {
    Orientation = self.EXIF.getTag(this, 'Orientation');
   });
   //  See if it is supported or not FileReader
   if (!file || !window.FileReader) return;

   if (/^image/.test(file.type)) {
    //  Create 1 A reader
    let reader = new FileReader();
    //  Putting a picture 2 Will be converted to  base64  Format 
    reader.readAsDataURL(file);
    //  Callback after successful reading 
    reader.onloadend = function() {
     let result = this.result;
     let img = new Image();
     img.src = result;
     self.postImg(file);
    };
   }
  },
  postImg(val) {
   // Write the interface here 
   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; //  Azimuth angle 
    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 = ' I am Longitude' + Longitude + ' ====== '+" I am Latitude" + Latitude
   console.log(' I'm coming in ', direction, Longitude, Latitude);
   console.log('allMetaData', allMetaData);
   // Interface  axios
   // });
  }
 }
};
</script>

This feature is downloaded from the exif. js file and can also be depended on through the npm installation. But they all have to be hung on the prototype chain.

The above is the vue use exif to get the picture latitude and longitude of the example code details, more about vue to get the picture latitude and longitude of information please pay attention to other related articles on this site!