关闭

前端获取图片exif信息

时间: 2020-03-17阅读: 1073标签: 图片

对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。

不用考虑服务端做,他们肯定是不做。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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8273

关闭

PNG图片在IE6中背景不透明怎么解决?

Internet Explorer中提供了提供了独有的滤镜效果,他通过filter:progid:DXImageTransform.Microsoft.AlphaImageLoader实现。

node之本地服务器图片上传

对于接口文件的返回,这里使用了body-parser这个中间件来对node返回的body进行json格式的解析,很重要的一点就是设置静态资源目录,不然的话就会报错,找不到文件或者文件夹

Js怎么给图片打马赛克?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

前端开发中对图片的优化技巧有哪些?

除了内容图片,其他的图片的作用是修饰,也就是对于传达信息来说并非本质性的。最大的优化就是压根不要图片!所以在优化之前要做的,首先是确认设计,设计本身是否需要用那么多图片?还是说可以更简洁?

html使用img标签和背景图片之间的区别

背景图片会等到html结构加载完成才开始加载img标签是网页结构的一部分,会在html结构加载的时候加载在网页加载的过程中,背景图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而img标签是网页结构(内容)的一部分会在html结构加载的过程中加载

提供图片服务网站

有了这些图片API,可以获取随机图片,很适合做Blogs背景图片,Unsplash,Pixabay,Bing每日图片,img.xjh.me

js上传图片,利用canvas实现图片压缩

最近项目中的一个基础功能-----手机上传图片:1、利用canvas进行压缩(这个应该都比较熟悉)2、利用exif-js获取照片旋转角度属性,因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性

nodejs实现二维码生成及图片合成

前端需要做分享功能。生成二维码后 在指定的图片上添加二维码和邀请码生成新的图片。1.使用 qr-code生成二维码;2.使用 text-to-svg 生成邀请码图片,字符转图片;3.使用gm工具合成图片

HTML图像标签img和源属性src及Alt属性、宽高、对齐

使用<img>标签定义 HTML 页面中的图像,图像标签<img>有两个必需的属性:源属性src和alt,<img>是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)

WPF 中如何创建忽略 DPI 属性的图片

WPF 框架设计为与 DPI 无关,但你依然可能遇到 DPI 问题。尤其是 Image 控件显示的图片会根据图片 EXIF 中的 DPI 信息和屏幕 DPI 自动缩放图片。对于 UI 用图来说这是好事

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!