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 $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
vue postcss-px2rem 自适应布局
May 15 Vue.js
Vue深入理解插槽slot的使用
Aug 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
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
原生js实现购物车功能
2020/09/23 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python实现线程池的方法
2015/06/30 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python3中条件控制、循环与函数的简易教程
2017/11/21 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
什么是python的函数体
2020/06/19 Python
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
酒吧员工的岗位职责
2013/11/26 职场文书
护士辞职信模板
2014/01/20 职场文书
小学生家长评语集锦
2014/01/30 职场文书
高中军训感想300字
2014/03/04 职场文书
小学家长评语大全
2014/04/16 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
茶花女读书笔记
2015/06/29 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
mysql sock 文件解析及作用讲解
2022/07/15 MySQL