前端获取图片exif信息

简介: 对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。不用考虑服务端做,他们肯定是不做。pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。上测试地址:https://www.lilnong.top/static/html/exif.html

bVbEy9p.webp (1).jpg


获取图片宽高


img = new Image();
img.src = URL.createObjectURL(file)
img.onload = function(){
    console.log(img.naturalWidth || img.width)
}


  1. URL.createObjectURL 可以把 input 选择的文件转换为一个 url。


  1. 我们使用 img 标签来加载图片。


  1. 获取图片宽高需要 onload 之后,才能获取。


获取 Exif 信息


使用的库是 exif-js


提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。


使用方法


EXIF.getData(file, function(){
    console.log('getData', this);
    // 这里面可以看到值,想要什么直接获取即可。
    console.log('getAllTags', EXIF.getAllTags(this));
});


拍摄方向


正好前两天在看这方面的知识,也顺便贴一下。


bVbEzbv.webp.jpg

图片Exif 信息中Orientation的理解和对此的处理


相关文章
|
3月前
|
前端开发 JavaScript 关系型数据库
若依框架------后台路由数据是如何转换为前端路由信息的
若依框架------后台路由数据是如何转换为前端路由信息的
109 0
|
5月前
|
前端开发
【前端图表】echarts散点图鼠标划过散点显示信息
【前端图表】echarts散点图鼠标划过散点显示信息
55 0
|
8天前
|
NoSQL JavaScript 前端开发
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
报错场景:ant design vue前端登录时,输入的验证码是对的,但是一直提上验证码错误,登录不进去 报错信息(Error in execution; nested exception)
18 0
|
6月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
52 0
|
6月前
|
前端开发 Java 程序员
Spring Boot+Netty+Websocket实现后台向前端推送信息
学过 Netty 的都知道,Netty 对 NIO 进行了很好的封装,简单的 API,庞大的开源社区。深受广大程序员喜爱。基于此本文分享一下基础的 netty 使用。实战制作一个 Netty + websocket 的消息推送小栗子。
|
5月前
|
前端开发
后台添加菜单信息如何在前端循环遍历?
后台添加菜单信息如何在前端循环遍历?
22 0
|
7月前
|
前端开发 API
前端也能获取电池信息,5分钟带你了解奇奇怪怪的知识点
前端也能获取电池信息,5分钟带你了解奇奇怪怪的知识点
31 0
|
7月前
|
前端开发 JavaScript API
TienChin 渠道管理-前端展示渠道信息
TienChin 渠道管理-前端展示渠道信息
30 0
TienChin 渠道管理-前端展示渠道信息
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十二天-信息列表页实现1
前端学习笔记202305学习笔记第二十二天-信息列表页实现1
52 0