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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
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中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
Javascript 中介者模式实例
2009/12/16 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
浅析js封装和作用域
2013/07/09 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python 实现单通道转3通道
2019/12/03 Python
Html5+JS实现手机摇一摇功能
2015/04/24 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
联想西班牙官网:Lenovo西班牙
2018/08/28 全球购物
澳大利亚在线家具、灯饰和家居装饰店:LivingStyles
2018/11/20 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
摄影专业毕业生求职信
2014/03/13 职场文书
库房保管员岗位职责
2014/04/07 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js
spring boot实现文件上传
2022/08/14 Java/Android