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. 快速入门系列--MVC--01概述

    虽然使用MVC已经不少年,相关技术的学习进行了多次,但是很多技术思路的理解其实都不够深入.其实就在MVC框架中有很多设计模式和设计思路的体现,例如DependencyResolver类就包含我们常见的 ...

  2. (转)rlwrap真是一个好东西

    在Linux下面使用sqlplus很不爽,上下键,退格键都不能用,严重降低生产效率. 某一天终于发现了这个rlwrap这个好东西,特写此文记录. 下载地址如下: http://utopia.knowa ...

  3. Java多线程系列--“JUC集合”08之 LinkedBlockingQueue

    概要 本章介绍JUC包中的LinkedBlockingQueue.内容包括:LinkedBlockingQueue介绍LinkedBlockingQueue原理和数据结构LinkedBlockingQ ...

  4. JavaWeb:Web与HTTP协议简介

    JavaWeb:Web与HTTP协议简介 Web的概念 什么是Web: Web是网络上使用最广泛的分布式应用架构. 旨在共享分布在网络上的各个Web服务器中的所有互相连接的信息. 三个特征: 用HTM ...

  5. HTML5移动Web开发(二)——配置移动开发环境以及简单示例

    一.准备 1.配置本地网络服务.对于Windows.Mac和Linux,最容易的方法是使用免费的XAMPP软件:http://www.apachefriends.org/en/index.html X ...

  6. 可视化(番外篇)——SWT总结

    本篇主要介绍如何在SWT下构建一个应用,如何安装SWT Designer并破解已进行SWT的可视化编程,Display以及Shell为何物.有何用,SWT中的常用组件.面板容器以及事件模型等. 1.可 ...

  7. Windows GUI代码与Windows消息问题调试利器

    Windows GUI代码与Windows消息问题调试利器 记得很久前有这么一种说法: 人类区别于动物的标准就是工具的使用.同样在软件开发这个行业里面,对于工具的使用也是高手和入门级选手的主要区别,高 ...

  8. Windows Azure Cloud Service (41) 修改云服务IIS托管管道模式为4.0经典模式

    <Windows Azure Platform 系列文章目录> 这是笔者在之前的项目中遇到的问题,做一下总结,给网友做参考. 在一般情况下,Visual Studio开发的Cloud Se ...

  9. LoRaWAN协议(五)--OTAA入网方式详述

    前言 OTAA(Over-The-Air Activation),是LoRaWAN的一种空中入网方式.当node在上电的时候处于非入网状态时,需要先入网才能和服务器进行通信.其操作就是node发送jo ...

  10. 第18/24周 乐观并发控制(Optimistic Concurrency)

    大家好,欢迎回到性能调优培训.上个星期我通过讨论悲观并发模式拉开了第5个月培训的序幕.今天我们继续,讨论下乐观并发模式(Optimistic Concurrency). 行版本(Row Version ...