我上一篇文章寫(xiě)了怎么壓縮圖片和旋轉(zhuǎn)。這篇寫(xiě)一下怎么看圖片的經(jīng)緯度

注意！！！

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

下面貼以下代碼。

<template> <div> <input type='file' 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; //去獲取拍照時(shí)的信息，解決拍出來(lái)的照片旋轉(zhuǎn)問(wèn)題 self.EXIF.getData(file, function() { Orientation = self.EXIF.getTag(this, ’Orientation’); }); // 看支持不支持FileReader if (!file || !window.FileReader) return; if (/^image/.test(file.type)) { // 創(chuàng)建一個(gè)reader let reader = new FileReader(); // 將圖片2將轉(zhuǎn)成 base64 格式 reader.readAsDataURL(file); // 讀取成功后的回調(diào) reader.onloadend = function() { let result = this.result; let img = new Image(); img.src = result; self.postImg(file); }; } }, postImg(val) { //這里寫(xiě)接口 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(’我進(jìn)來(lái)了’, direction, Longitude, Latitude); console.log(’allMetaData’, allMetaData); //接口 axios // }); } }};</script>

這個(gè)功能是下載的exif.js文件，也可以通過(guò)npm安裝依賴。不過(guò)都要掛在到原型鏈上。

以上就是vue使用exif獲取圖片經(jīng)緯度的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于vue 獲取圖片經(jīng)緯度的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！