关于exif.js

最近准备本身写一些东西,只做为笔记,不是厉害的角色因此借鉴了不少网上的资料,我看资料比较杂,会尽可能吧参考的文章放在文末,若是有什么错误但愿你们可以帮忙指出,必定改正.

最近项目有个需求就是要显示上传图片的源数据,我各类打log最后只能拿到图片的宽高还有名字之类简单的属性.我告诉同事我只能拿到那么多数据了,而后同事说,先放一下吧,后来我在网上无心间发现了EXIF.JS

什么是EXIF.js

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

注意

• EXIF 数据主要来自拍摄的照片，多用于移动端开发，PC 端也会用到，此插件兼容主流浏览器，IE10 如下不支持。
• 在实际运用的过程之中，有时候咱们须要上传相关的照片内容。而因为当前的照片内容实际上经常较大，因此咱们须要进行压缩处理，这是就会发生错误，上传的图片内容在服务端获取以后展现为原图片旋转90度的效果。 针对于IOS端：缘由--因为目前的手机拍照基本都在2M以上，而ios中只要超过2M图片就会自动旋转。拍照后直接取出来的UIimage（用UIImagePickerControllerOriginalImage取出），它自己的imageOrientation属性是3，即UIImageOrientationRight。若是这个图片直接使用则没事，可是若是对它进行裁剪、缩放等操做后，它的这个imageOrientation属性会变成0。此时这张图片用在别的地方就会发生旋转。imageOrientation是只读的，不能直接修改其值。 解决--在获取原照片的以后经过exif.js先获取当前图片的oritention的值，而后在，经过判别这一属性值的内容，来将压缩以后的图片进行旋转，保证图片展现正确，以后再上传到服务器端。这样一来展现的内容将会修改正确。 针对于Android：暂时未发现这一类问题。 针对APICloud这一类H5转成的app：暂定

提供的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 修正

使用方法

//引入
<script src="exif.js"></script>
//获取数据
EXIF.getData(document.getElementById('imgElement'), function(){
  EXIF.getAllTags(this);
  EXIF.getTag(this, 'Orientation');
});
复制代码

在vue中使用

• npm i exif-js
• 在main.js中引入 import EXIF from 'exif-js'
• 并将其挂在vue 原型上Vue.prototype.EXIF = EXIF

• <input type="file" id="" value="" accept="image/*" multiple="multiple" name="files" @change="uploadFile"  ref="img"/>
       
       
       uploadFile (event) {
  	   let file = event.target.files[0]
  	   let _this = this // 须要将Vue的原型挂在_this上边，不然会与exif.js中回调函数的this冲突
  	   this.EXIF.getData(file, function () {
  	     console.log(_this.EXIF.getAllTags(this)) // 此处打印的为选中图片的数据
  	  })
  	}
  复制代码

由于最后项目采起了后台获取的方法最终也没实践过...

相关连接

www.jianshu.com/p/0131ecb5b…

code.ciaoca.com/javascript/…

code.ciaoca.com/javascript/… 在线demo

www.w3cschool.cn/extjs/extjs… 更多使用

blog.csdn.net/weixin_4299…