exif.js獲取圖片原始信息的實現

更新時間：2025年05月08日 11:32:14 作者：前端小白_50332439

exif-js?是一個JavaScript庫,用于讀取圖片的EXIF信息,本文就來介紹一下exif.js獲取圖片原始信息的實現,感興趣的可以了解一下

前言

Exif.js 提供了 JavaScript 讀取圖像的原始數據的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數據。

一、Exif.js 是什么？

exif-js 是一個JavaScript庫，用于讀取圖片的EXIF信息。EXIF信息包括拍攝時間、相機型號、焦距等元數據。EXIF 標準僅適用于.jpg和.tiff圖像。

注意：exif 數據主要來自拍攝的照片，多用于移動端開發(fā)，此插件兼容主流瀏覽器，IE10 以下不支持。

二、使用步驟

1.npm安裝

npm install exif-js --save

2.CDN引入（GitHub地址）

<script src="https://cdn.jsdelivr.net/npm/exif-js"></script>

3.讀取圖片的EXIF信息

代碼如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EXIF Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/exif-js"></script>
</head>
<body>
    <input type="file" id="upload" name="image">
    <script>
        document.getElementById('upload').addEventListener('change', function(e) {
            var file = e.target.files[0]; // 獲取文件對象
            if (!file.type.match('image.*')) {
                alert('Please select an image file.');
                return;
            }
            var reader = new FileReader();
            reader.onload = function(event) {
                var data = event.target.result; // 圖片的base64編碼數據
                EXIF.getData(data, function() { // 使用EXIF.js讀取數據
                    var make = EXIF.getTag(this, "Make"); // 獲取相機制造商信息
                    var model = EXIF.getTag(this, "Model"); // 獲取相機型號信息
                    var date = EXIF.getTag(this, "DateTime"); // 獲取拍攝日期和時間
                    console.log("Camera Make: " + make);
                    console.log("Camera Model: " + model);
                    console.log("Date & Time: " + date);
                });
            };
            reader.readAsDataURL(file); // 讀取文件內容為DataURL
        });
    </script>
</body>
</html>

三、API方法及屬性

API	說明
EXIF.getData(img, callback)	獲取圖像的數據能兼容尚未支持提供 EXIF 數據的瀏覽器獲取到元數據。
EXIF.getTag(img, tag)	獲取圖像的某個數據
EXIF.getAllTags(img)	獲取圖像的全部數據，值以對象的方式返回
EXIF.pretty(img)	獲取圖像的全部數據，值以字符串的方式返回

屬性	說明
ExifVersion	Exif 版本
FlashPixVersion	FlashPix 版本
ColorSpace	色域、色彩空間
PixelXDimension	圖像的有效寬度
PixelYDimension	圖像的有效高度
ComponentsConfiguration	圖像構造
CompressedBitsPerPixel	壓縮時每像素色彩位
MakerNote	制造商設置的信息
UserComment	用戶評論
RelatedSoundFile	關聯的聲音文件
DateTimeOriginal	創(chuàng)建時間
DateTimeDigitized	數字化創(chuàng)建時間
SubsecTime	日期時間（秒）
SubsecTimeOriginal	原始日期時間（秒）
SubsecTimeDigitized	原始日期時間數字化（秒）
ExposureTime	曝光時間
FNumber	光圈值
ExposureProgram	曝光程序
SpectralSensitivity	光譜靈敏度
ISOSpeedRatings	感光度
OECF	光電轉換功能
ShutterSpeedValue	快門速度
ApertureValue	鏡頭光圈
BrightnessValue	亮度
ExposureBiasValue	曝光補償
MaxApertureValue	最大光圈
SubjectDistance	物距
MeteringMode	測光方式
Lightsource	光源
Flash	閃光燈
SubjectArea	主體區(qū)域
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	測量的衛(wèi)星
GPSStatus	接收器狀態(tài)
GPSMeasureMode	測量模式
GPSDOP	測量精度
GPSSpeedRef	速度單位
GPSSpeed	GPS 接收器速度
GPSTrackRef	移動方位參照
GPSTrack	移動方位
GPSImgDirectionRef	圖像方位參照
GPSImgDirection	圖像方位
GPSMapDatum	地理測量資料
GPSDestLatitudeRef	目標緯度參照
GPSDestLatitude	目標緯度
GPSDestLongitudeRef	目標經度參照
GPSDestLongitude	目標經度
GPSDestBearingRef	目標方位參照
GPSDestBearing	目標方位
GPSDestDistanceRef	目標距離參照
GPSDestDistance	目標距離
GPSProcessingMethod	GPS 處理方法名
GPSAreaInformation	GPS 區(qū)功能變數名
GPSDateStamp	GPS 日期
GPSDifferential	GPS 修正