前端获取图片exif信息
2020/3/19 14:01:27
本文主要是介绍前端获取图片exif信息,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
对又是我,每天都有新的需求。
这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。
不用考虑服务端做,他们肯定是不做。
pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。
废话不对说,上测试地址:https://www.lilnong.top/static/html/exif.html
获取图片宽高
img = new Image(); img.src = URL.createObjectURL(file) img.onload = function(){ console.log(img.naturalWidth || img.width) }
-
URL.createObjectURL
可以把 input 选择的文件转换为一个 url。 - 我们使用 img 标签来加载图片。
- 获取图片宽高需要 onload 之后,才能获取。
获取 Exif 信息
使用的库是 exif-js。
提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
使用方法
EXIF.getData(file, function(){ console.log('getData', this); // 这里面可以看到值,想要什么直接获取即可。 console.log('getAllTags', EXIF.getAllTags(this)); });
拍摄方向
正好前两天在看这方面的知识,也顺便贴一下。
图片Exif 信息中Orientation的理解和对此的处理
微信公众号:前端linong
这篇关于前端获取图片exif信息的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程