Exif.js 读取图像的元数据
Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展,例如:拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。
- 注意事项:
EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC 端也会用到,此插件兼容主流浏览器,IE10 以下不支持。
在线实例
实例预览 简单示例
实例预览 获取 base64 编码文件数据
实例预览 异步获取图像数据
使用方法
载入 JavaScript 文件
- <script src="exif.js"></script>
获取 EXIF 数据
EXIF.getData(document.getElementById('imgElement'), function(){
EXIF.getAllTags(this);
EXIF.getTag(this, 'Orientation');
});
API 方法
名称 | 说明 |
---|---|
EXIF.getData(img, callback) |
获取图像的数据 能兼容尚未支持提供 EXIF 数据的浏览器获取到元数据。 |
EXIF.getTag(img, tag) | 获取图像的某个数据 |
EXIF.getAllTags(img) | 获取图像的全部数据,值以对象的方式返回 |
EXIF.pretty(img) | 获取图像的全部数据,值以字符串的方式返回 |
EXIF 标识
名称 | 说明 |
---|---|
ExifVersion | Exif 版本 |
FlashPixVersion | FlashPix 版本 |
ColorSpace | 色域、色彩空间 |
PixelXDimension | 图像的有效宽度 |
PixelYDimension | 图像的有效高度 |
ComponentsConfiguration | 图像构造 |
CompressedBitsPerPixel | 压缩时每像素色彩位 |
MakerNote | 制造商设置的信息 |
UserComment | 用户评论 |
RelatedSoundFile | 关联的声音文件 |
DateTimeOriginal | 创建时间 |
DateTimeDigitized | 数字化创建时间 |
SubsecTime | 日期时间(秒) |
SubsecTimeOriginal | 原始日期时间(秒) |
SubsecTimeDigitized | 原始日期时间数字化(秒) |
ExposureTime | 曝光时间 |
FNumber | 光圈值 |
ExposureProgram | 曝光程序 |
SpectralSensitivity | 光谱灵敏度 |
ISOSpeedRatings | 感光度 |
OECF | 光电转换功能 |
ShutterSpeedValue | 快门速度 |
ApertureValue | 镜头光圈 |
BrightnessValue | 亮度 |
ExposureBiasValue | 曝光补偿 |
MaxApertureValue | 最大光圈 |
SubjectDistance | 物距 |
MeteringMode | 测光方式 |
Lightsource | 光源 |
Flash | 闪光灯 |
SubjectArea | 主体区域 |
FocalLength | 焦距 |
FlashEnergy | 闪光灯强度 |
SpatialFrequencyResponse | 空间频率反应 |
FocalPlaneXResolution | 焦距平面X轴解析度 |
FocalPlaneYResolution | 焦距平面Y轴解析度 |
FocalPlaneResolutionUnit | 焦距平面解析度单位 |
SubjectLocation | 主体位置 |
ExposureIndex | 曝光指数 |
SensingMethod | 图像传感器类型 |
FileSource | 源文件 |
SceneType | 场景类型(1 == 直接拍摄) |
CFAPattern | CFA 模式 |
CustomRendered | 自定义图像处理 |
ExposureMode | 曝光模式 |
WhiteBalance | 白平衡(1 == 自动,2 == 手动) |
DigitalZoomRation | 数字变焦 |
FocalLengthIn35mmFilm | 35毫米胶片焦距 |
SceneCaptureType | 场景拍摄类型 |
GainControl | 场景控制 |
Contrast | 对比度 |
Saturation | 饱和度 |
Sharpness | 锐度 |
DeviceSettingDescription | 设备设定描述 |
SubjectDistanceRange | 主体距离范围 |
InteroperabilityIFDPointer | |
ImageUniqueID | 图像唯一ID |
名称 | 说明 |
---|---|
ImageWidth | 图像宽度 |
ImageHeight | 图像高度 |
BitsPerSample | 比特采样率 |
Compression | 压缩方法 |
PhotometricInterpretation | 像素合成 |
Orientation | 拍摄方向 |
SamplesPerPixel | 像素数 |
PlanarConfiguration | 数据排列 |
YCbCrSubSampling | 色相抽样比率 |
YCbCrPositioning | 色相配置 |
XResolution | X方向分辨率 |
YResolution | Y方向分辨率 |
ResolutionUnit | 分辨率单位 |
StripOffsets | 图像资料位置 |
RowsPerStrip | 每带行数 |
StripByteCounts | 每压缩带比特数 |
JPEGInterchangeFormat | JPEG SOI 偏移量 |
JPEGInterchangeFormatLength | JPEG 比特数 |
TransferFunction | 转移功能 |
WhitePoint | 白点色度 |
PrimaryChromaticities | 主要色度 |
YCbCrCoefficients | 颜色空间转换矩阵系数 |
ReferenceBlackWhite | 黑白参照值 |
DateTime | 日期和时间 |
ImageDescription | 图像描述、来源 |
Make | 生产者 |
Model | 型号 |
Software | 软件 |
Artist | 作者 |
Copyright | 版权信息 |
名称 | 说明 |
---|---|
GPSVersionID | GPS 版本 |
GPSLatitudeRef | 南北纬 |
GPSLatitude | 纬度 |
GPSLongitudeRef | 东西经 |
GPSLongitude | 经度 |
GPSAltitudeRef | 海拔参照值 |
GPSAltitude | 海拔 |
GPSTimeStamp | GPS 时间戳 |
GPSSatellites | 测量的卫星 |
GPSStatus | 接收器状态 |
GPSMeasureMode | 测量模式 |
GPSDOP | 测量精度 |
GPSSpeedRef | 速度单位 |
GPSSpeed | GPS 接收器速度 |
GPSTrackRef | 移动方位参照 |
GPSTrack | 移动方位 |
GPSImgDirectionRef | 图像方位参照 |
GPSImgDirection | 图像方位 |
GPSMapDatum | 地理测量资料 |
GPSDestLatitudeRef | 目标纬度参照 |
GPSDestLatitude | 目标纬度 |
GPSDestLongitudeRef | 目标经度参照 |
GPSDestLongitude | 目标经度 |
GPSDestBearingRef | 目标方位参照 |
GPSDestBearing | 目标方位 |
GPSDestDistanceRef | 目标距离参照 |
GPSDestDistance | 目标距离 |
GPSProcessingMethod | GPS 处理方法名 |
GPSAreaInformation | GPS 区功能变数名 |
GPSDateStamp | GPS 日期 |
GPSDifferential | GPS 修正 |
Exif.js 读取图像的元数据的更多相关文章
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
- 详解exif.js,应用于canvas照片倒转(海报H5)
业务背景,苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base ...
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题
原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...
- exif.js 旋转图片
还是那个问题:网上的大胸弟们BB一大堆,没几个给的代码能用的,话不多说,直接上demo: 链接:https://pan.baidu.com/s/1jJ6vnt8 密码:swwm 不要忽视demo中的s ...
- Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能
vue组件代码 <template> <div> <div style="padding:20px;"> <div class=" ...
- opencv学习之读取图像-imread函数
序 想要完整全面地学习opencv,仅凭阅读samples的示例源码是不够的.毕竟opencv是一个拥有非常多函数的程序库,所以在每学习一个函数时,芒果觉得有必要记录下来,分享给有需要的同学.于是,就 ...
- 运用Mono.Cecil 反射读取.NET程序集元数据
CLR自带的反射机智和API可以很轻松的读取.NET程序集信息,但是不能对程序集进行修改.CLR提供的是只读的API,但是开源项目Mono.Cecil不仅仅可以读取.NET程序集的元数据,还可以进行修 ...
随机推荐
- Enterprise Solution 界面设计规范
Enteprise Solution有一套自己的界面设计规范,也是很多年(10年以上)管理软件界面精华的积累.没有一个软件从一开始就很善于界面设计,许多个小小的改善,比如控件位置的移动,控件摆放顺序的 ...
- 第四章 HTML与JavaScript
DHTML就是与CSS和Web文档进行交互生成动态页面的JavaScript. 4.1HTML文档剖析 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- UML基础系列:用例图
1. 概述 用例图(Use Case Diagram)描述“用户.需求.系统功能单元”之间的关系,是参与者所能观察和使用到的系统功能模型图. 用例图用于需求分析阶段 用例图包含6个基本元素:参与者(A ...
- 找到SQL Server数据库历史增长信息
很多时候,在我们规划SQL Server数据库的空间,或向存储方面要空间时,都需要估算所需申请数据库空间的大小,估计未来最简单的办法就是看过去的趋势,这通常也是最合理的方式. 通常来讲 ...
- PHP的学习--连接MySQL的三种方式
记录一下PHP连接MySQL的三种方式. 先mock一下数据,可以执行一下sql. /*创建数据库*/ CREATE DATABASE IF NOT EXISTS `test`; /*选择数据库*/ ...
- 决战JS
经过这几日的学习,测试和摸索,算是了解了一些关于javascript 的相关知识吧.学习过程中做出了一些小DEMO,现总结一下实现这些DEMO的基本思路,如有不妥或更为简便的方法,还希望大神拍砖,共同 ...
- radialLine 径向线生成器
radialLine 径向线生成器 使用默认的角度,半径访问器,和插值器函数构造一个 径向线生成器,返回的函数用以生成开放分段线性曲线.折线.它和line生成器很相似,只是将line的x,y访问其换位 ...
- Azure Automation (1) 入门
<Windows Azure Platform 系列文章目录> 通过Azure Automation(自动化),开发人员可以自动完成通常要在云环境中执行的手动.长时间进行.易出错且重复性高 ...
- 【手把手教你全文检索】Lucene索引的【增、删、改、查】
前言 搞检索的,应该多少都会了解Lucene一些,它开源而且简单上手,官方API足够编写些小DEMO.并且根据倒排索引,实现快速检索.本文就简单的实现增量添加索引,删除索引,通过关键字查询,以及更新索 ...
- 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...