介绍 & lt; template>
,& lt; div>
& lt;才能input 类型=癴ile", id=皍pload",接受=癷mage", @change=皍pload",/比;
& lt;才能span> {{textData}} & lt;/span>
,& lt;/div>
& lt;/template>
& lt; script>
export default {
,数据(){
return {才能
,,,picValue: {},
,,,headerImage: & # 39; & # 39;
,,textData: & # 39; & # 39;
,,};
},
,组件:{},
,方法:{
上传才能(e), {
,,console.log (e);
,,let files =, e.target.files | |, e.dataTransfer.files;
,,if (! files.length),返回;
,,this.picValue =,文件[0];
,,this.imgPreview (this.picValue);
,,},
imgPreview才能(文件),{
,,let self =,;
,,let 定位;
,,//去获取拍照时的信息,解决拍出来的照片旋转问题
,才能self.EXIF.getData(文件,函数(),{
,,,Orientation =, self.EXIF.getTag(这个,,& # 39;方向# 39;);
,,});//,,,看支持不支持FileReader
,,if (! file | |, ! window.FileReader),返回;
,,if (/^图像/test (file.type)), {
,,,//,创建一个读者
,,,let reader =, new FileReader ();
,,,//,将图2片将转成,base64 格式
,,,reader.readAsDataURL(文件);
,,,//,读取成功后的回调
,,,reader.onloadend =,()函数,{
,,,,let result =, this.result;
,,,,let img =, new 图像();
,,,,img.src =,结果;
,,,,self.postImg(文件);
,,,};
,,}
,,},
postImg才能(val), {
,,//这里写接口
,,let self =,;
,,//,. getelementbyid(& # 39;上传# 39;)
,,//,this.EXIF.getData (val,函数(r), {
,,let r =, this.EXIF.getAllTags (val);
,,const allMetaData =, r;
,,let 方向;
,,if (allMetaData.GPSImgDirection), {
,,,const directionArry =, allMetaData.GPSImgDirection;,//,方位角
,,,direction =, directionArry.numerator /, directionArry.denominator;
,,}
,,let 经度;
,,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 纬度;
,,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 =, & # 39;我是经度# 39;,+,Longitude +, & # 39;,======, & # 39; +“我是Latitude" +,纬度
,,console.log(& # 39;我进来了& # 39;,,,,经度,,纬度);
,,console.log (& # 39; allMetaData& # 39;,, allMetaData);
,,//接口,axios//,,,});
,,}
,}
};
& lt;/script>
这篇文章给大家介绍怎么在vue中利用exif对图片信息中的经纬度进行获取,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
实现方法如下:
这个功能是下载的exif。js文件,也可以通过npm安装依赖。不过都要挂在到原型链上。
关于怎么在vue中利用exif对图片信息中的经纬度进行获取就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
