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

  • 注意事项:
  • EXIF 数据主要来自拍摄的照片,多用于移动端开发,PC 端也会用到,此插件兼容主流浏览器,IE10 以下不支持。

  • github地址

在线实例

实例预览 简单示例

实例预览 获取 base64 编码文件数据

实例预览 异步获取图像数据

使用方法

载入 JavaScript 文件

  1. <script src="exif.js"></script>
复制

获取 EXIF 数据

  1. EXIF.getData(document.getElementById('imgElement'), function(){ 
  2.   EXIF.getAllTags(this); 
  3.   EXIF.getTag(this, 'Orientation'); 
  4. }); 
复制

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
Tiff 相关
名称 说明
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 版权信息
GPS 相关
名称 说明
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 读取图像的元数据的更多相关文章

  1. 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  2. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  3. 详解exif.js,应用于canvas照片倒转(海报H5)

    业务背景,苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base ...

  4. 利用exif.js解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  5. 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题

    原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...

  6. exif.js 旋转图片

    还是那个问题:网上的大胸弟们BB一大堆,没几个给的代码能用的,话不多说,直接上demo: 链接:https://pan.baidu.com/s/1jJ6vnt8 密码:swwm 不要忽视demo中的s ...

  7. Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能

    vue组件代码 <template> <div> <div style="padding:20px;"> <div class=" ...

  8. opencv学习之读取图像-imread函数

    序 想要完整全面地学习opencv,仅凭阅读samples的示例源码是不够的.毕竟opencv是一个拥有非常多函数的程序库,所以在每学习一个函数时,芒果觉得有必要记录下来,分享给有需要的同学.于是,就 ...

  9. 运用Mono.Cecil 反射读取.NET程序集元数据

    CLR自带的反射机智和API可以很轻松的读取.NET程序集信息,但是不能对程序集进行修改.CLR提供的是只读的API,但是开源项目Mono.Cecil不仅仅可以读取.NET程序集的元数据,还可以进行修 ...

随机推荐

  1. Enterprise Solution 界面设计规范

    Enteprise Solution有一套自己的界面设计规范,也是很多年(10年以上)管理软件界面精华的积累.没有一个软件从一开始就很善于界面设计,许多个小小的改善,比如控件位置的移动,控件摆放顺序的 ...

  2. 第四章 HTML与JavaScript

    DHTML就是与CSS和Web文档进行交互生成动态页面的JavaScript. 4.1HTML文档剖析 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...

  3. UML基础系列:用例图

    1. 概述 用例图(Use Case Diagram)描述“用户.需求.系统功能单元”之间的关系,是参与者所能观察和使用到的系统功能模型图. 用例图用于需求分析阶段 用例图包含6个基本元素:参与者(A ...

  4. 找到SQL Server数据库历史增长信息

        很多时候,在我们规划SQL Server数据库的空间,或向存储方面要空间时,都需要估算所需申请数据库空间的大小,估计未来最简单的办法就是看过去的趋势,这通常也是最合理的方式.     通常来讲 ...

  5. PHP的学习--连接MySQL的三种方式

    记录一下PHP连接MySQL的三种方式. 先mock一下数据,可以执行一下sql. /*创建数据库*/ CREATE DATABASE IF NOT EXISTS `test`; /*选择数据库*/ ...

  6. 决战JS

    经过这几日的学习,测试和摸索,算是了解了一些关于javascript 的相关知识吧.学习过程中做出了一些小DEMO,现总结一下实现这些DEMO的基本思路,如有不妥或更为简便的方法,还希望大神拍砖,共同 ...

  7. radialLine 径向线生成器

    radialLine 径向线生成器 使用默认的角度,半径访问器,和插值器函数构造一个 径向线生成器,返回的函数用以生成开放分段线性曲线.折线.它和line生成器很相似,只是将line的x,y访问其换位 ...

  8. Azure Automation (1) 入门

    <Windows Azure Platform 系列文章目录> 通过Azure Automation(自动化),开发人员可以自动完成通常要在云环境中执行的手动.长时间进行.易出错且重复性高 ...

  9. 【手把手教你全文检索】Lucene索引的【增、删、改、查】

    前言 搞检索的,应该多少都会了解Lucene一些,它开源而且简单上手,官方API足够编写些小DEMO.并且根据倒排索引,实现快速检索.本文就简单的实现增量添加索引,删除索引,通过关键字查询,以及更新索 ...

  10. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...