关于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)) // 此处打印的为选中图片的数据
	  })
	}

因为最后项目采取了后台获取的方法最终也没实践过...