vue使用exif获取图片经纬度的示例代码
作者:china丶MRH
这篇文章主要介绍了vue使用exif获取图片经纬度的示例代码,帮助大家更好的利用vue获取图片信息,感兴趣的朋友可以了解下
我上一篇文章写了怎么压缩图片和旋转。这篇写一下怎么看图片的经纬度
注意!!!
只有原图有大量的元数据信息。通过拍照软件如: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安装依赖。不过都要挂在到原型链上。
以上就是vue使用exif获取图片经纬度的示例代码的详细内容,更多关于vue 获取图片经纬度的资料请关注脚本之家其它相关文章!