HTML5教程

前端获取图片exif信息

本文主要是介绍前端获取图片exif信息,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

对又是我,每天都有新的需求

这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。

不用考虑服务端做,他们肯定是不做。

pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。

废话不对说,上测试地址:https://www.lilnong.top/static/html/exif.html

image.png

获取图片宽高

img = new Image();
img.src = URL.createObjectURL(file)
img.onload = function(){
    console.log(img.naturalWidth || img.width)
}
  1. URL.createObjectURL 可以把 input 选择的文件转换为一个 url。
  2. 我们使用 img 标签来加载图片。
  3. 获取图片宽高需要 onload 之后,才能获取。

获取 Exif 信息

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

使用方法

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

拍摄方向

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

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

微信公众号:前端linong

clipboard.png

这篇关于前端获取图片exif信息的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!