關於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…