vue使用exif获取图片经纬度的示例代码


Posted in Vue.js onDecember 11, 2020

我上一篇文章写了怎么压缩图片和旋转。这篇写一下怎么看图片的经纬度

注意!!!

只有原图有大量的元数据信息。通过拍照软件如: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 获取图片经纬度的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 #Vue.js
vuex页面刷新导致数据丢失的解决方案
Dec 10 #Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
You might like
人大复印资料处理程序_补充篇
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php数组键值用法实例分析
2015/02/27 PHP
PDO::rollBack讲解
2019/01/29 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
解决jquery有正确返回值但不执行success函数的问题
2018/08/20 jQuery
es6数据变更同步到视图层的方法
2019/03/04 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
html5 移动端视频video的android兼容(去除播放控件、全屏)
2020/03/26 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
网站设计师的岗位职责
2013/11/21 职场文书
企业给企业的表扬信
2014/01/13 职场文书
给领导的感谢信范文
2015/01/23 职场文书
红色经典电影观后感
2015/06/18 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
python基础之类方法和静态方法
2021/10/24 Python
SQL Server使用导出向导功能
2022/04/08 SQL Server