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程序集的元数据,还可以进行修 ...
随机推荐
- 快速入门系列--MVC--01概述
虽然使用MVC已经不少年,相关技术的学习进行了多次,但是很多技术思路的理解其实都不够深入.其实就在MVC框架中有很多设计模式和设计思路的体现,例如DependencyResolver类就包含我们常见的 ...
- (转)rlwrap真是一个好东西
在Linux下面使用sqlplus很不爽,上下键,退格键都不能用,严重降低生产效率. 某一天终于发现了这个rlwrap这个好东西,特写此文记录. 下载地址如下: http://utopia.knowa ...
- Java多线程系列--“JUC集合”08之 LinkedBlockingQueue
概要 本章介绍JUC包中的LinkedBlockingQueue.内容包括:LinkedBlockingQueue介绍LinkedBlockingQueue原理和数据结构LinkedBlockingQ ...
- JavaWeb:Web与HTTP协议简介
JavaWeb:Web与HTTP协议简介 Web的概念 什么是Web: Web是网络上使用最广泛的分布式应用架构. 旨在共享分布在网络上的各个Web服务器中的所有互相连接的信息. 三个特征: 用HTM ...
- HTML5移动Web开发(二)——配置移动开发环境以及简单示例
一.准备 1.配置本地网络服务.对于Windows.Mac和Linux,最容易的方法是使用免费的XAMPP软件:http://www.apachefriends.org/en/index.html X ...
- 可视化(番外篇)——SWT总结
本篇主要介绍如何在SWT下构建一个应用,如何安装SWT Designer并破解已进行SWT的可视化编程,Display以及Shell为何物.有何用,SWT中的常用组件.面板容器以及事件模型等. 1.可 ...
- Windows GUI代码与Windows消息问题调试利器
Windows GUI代码与Windows消息问题调试利器 记得很久前有这么一种说法: 人类区别于动物的标准就是工具的使用.同样在软件开发这个行业里面,对于工具的使用也是高手和入门级选手的主要区别,高 ...
- Windows Azure Cloud Service (41) 修改云服务IIS托管管道模式为4.0经典模式
<Windows Azure Platform 系列文章目录> 这是笔者在之前的项目中遇到的问题,做一下总结,给网友做参考. 在一般情况下,Visual Studio开发的Cloud Se ...
- LoRaWAN协议(五)--OTAA入网方式详述
前言 OTAA(Over-The-Air Activation),是LoRaWAN的一种空中入网方式.当node在上电的时候处于非入网状态时,需要先入网才能和服务器进行通信.其操作就是node发送jo ...
- 第18/24周 乐观并发控制(Optimistic Concurrency)
大家好,欢迎回到性能调优培训.上个星期我通过讨论悲观并发模式拉开了第5个月培训的序幕.今天我们继续,讨论下乐观并发模式(Optimistic Concurrency). 行版本(Row Version ...