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监听滚动事件的方法
Dec 21 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 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 彩色文字实现代码
2009/06/29 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
JavaScript this 深入理解
2009/07/30 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
2017/06/06 Javascript
js实现右键弹出自定义菜单
2020/09/08 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
python使用opencv在Windows下调用摄像头实现解析
2019/11/26 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
低碳生活的宣传标语
2014/06/23 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
个人租房协议书样本
2014/10/01 职场文书
家属慰问信
2015/02/14 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记
Nginx 匹配方式
2022/05/15 Servers