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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
vue的项目如何打包上线
Apr 13 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jQuery select控制插件
2009/08/17 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
Python Trie树实现字典排序
2014/03/28 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
python开发中range()函数用法实例分析
2015/11/12 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
实习自我评价怎么写
2013/12/02 职场文书
前台接待岗位职责
2013/12/03 职场文书
工程项目建议书范文
2014/03/12 职场文书
体育教师个人总结
2015/02/09 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL