快捷導(dǎo)航

exif.js獲取圖片原始信息的實(shí)現(xiàn)

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

exif-js?是一個(gè)JavaScript庫(kù),用于讀取圖片的EXIF信息,本文就來(lái)介紹一下exif.js獲取圖片原始信息的實(shí)現(xiàn),感興趣的可以了解一下

前言

Exif.js 提供了 JavaScript 讀取圖像的原始數(shù)據(jù)的功能擴(kuò)展，例如：拍照方向、相機(jī)設(shè)備型號(hào)、拍攝時(shí)間、ISO 感光度、GPS 地理位置等數(shù)據(jù)。

一、Exif.js 是什么？

exif-js 是一個(gè)JavaScript庫(kù)，用于讀取圖片的EXIF信息。EXIF信息包括拍攝時(shí)間、相機(jī)型號(hào)、焦距等元數(shù)據(jù)。EXIF 標(biāo)準(zhǔn)僅適用于.jpg和.tiff圖像。

注意：exif 數(shù)據(jù)主要來(lái)自拍攝的照片，多用于移動(dòng)端開(kāi)發(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]; // 獲取文件對(duì)象
            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編碼數(shù)據(jù)
                EXIF.getData(data, function() { // 使用EXIF.js讀取數(shù)據(jù)
                    var make = EXIF.getTag(this, "Make"); // 獲取相機(jī)制造商信息
                    var model = EXIF.getTag(this, "Model"); // 獲取相機(jī)型號(hào)信息
                    var date = EXIF.getTag(this, "DateTime"); // 獲取拍攝日期和時(shí)間
                    console.log("Camera Make: " + make);
                    console.log("Camera Model: " + model);
                    console.log("Date & Time: " + date);
                });
            };
            reader.readAsDataURL(file); // 讀取文件內(nèi)容為DataURL
        });
    </script>
</body>
</html>

三、API方法及屬性

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

屬性	說(shuō)明
ExifVersion	Exif 版本
FlashPixVersion	FlashPix 版本
ColorSpace	色域、色彩空間
PixelXDimension	圖像的有效寬度
PixelYDimension	圖像的有效高度
ComponentsConfiguration	圖像構(gòu)造
CompressedBitsPerPixel	壓縮時(shí)每像素色彩位
MakerNote	制造商設(shè)置的信息
UserComment	用戶評(píng)論
RelatedSoundFile	關(guān)聯(lián)的聲音文件
DateTimeOriginal	創(chuàng)建時(shí)間
DateTimeDigitized	數(shù)字化創(chuàng)建時(shí)間
SubsecTime	日期時(shí)間（秒）
SubsecTimeOriginal	原始日期時(shí)間（秒）
SubsecTimeDigitized	原始日期時(shí)間數(shù)字化（秒）
ExposureTime	曝光時(shí)間
FNumber	光圈值
ExposureProgram	曝光程序
SpectralSensitivity	光譜靈敏度
ISOSpeedRatings	感光度
OECF	光電轉(zhuǎn)換功能
ShutterSpeedValue	快門速度
ApertureValue	鏡頭光圈
BrightnessValue	亮度
ExposureBiasValue	曝光補(bǔ)償
MaxApertureValue	最大光圈
SubjectDistance	物距
MeteringMode	測(cè)光方式
Lightsource	光源
Flash	閃光燈
SubjectArea	主體區(qū)域
FocalLength	焦距
FlashEnergy	閃光燈強(qiáng)度
SpatialFrequencyResponse	空間頻率反應(yīng)
FocalPlaneXResolution	焦距平面X軸解析度
FocalPlaneYResolution	焦距平面Y軸解析度
FocalPlaneResolutionUnit	焦距平面解析度單位
SubjectLocation	主體位置
ExposureIndex	曝光指數(shù)
SensingMethod	圖像傳感器類型
FileSource	源文件
SceneType	場(chǎng)景類型（1 == 直接拍攝）
CFAPattern	CFA 模式
CustomRendered	自定義圖像處理
ExposureMode	曝光模式
WhiteBalance	白平衡（1 == 自動(dòng)，2 == 手動(dòng)）
DigitalZoomRation	數(shù)字變焦
FocalLengthIn35mmFilm	35毫米膠片焦距
SceneCaptureType	場(chǎng)景拍攝類型
GainControl	場(chǎng)景控制
Contrast	對(duì)比度
Saturation	飽和度
Sharpness	銳度
DeviceSettingDescription	設(shè)備設(shè)定描述
SubjectDistanceRange	主體距離范圍
InteroperabilityIFDPointer
ImageUniqueID	圖像唯一ID
ImageWidth	圖像寬度
ImageHeight	圖像高度
BitsPerSample	比特采樣率
Compression	壓縮方法
PhotometricInterpretation	像素合成
Orientation	拍攝方向
SamplesPerPixel	像素?cái)?shù)
PlanarConfiguration	數(shù)據(jù)排列
YCbCrSubSampling	色相抽樣比率
YCbCrPositioning	色相配置
XResolution	X方向分辨率
YResolution	Y方向分辨率
ResolutionUnit	分辨率單位
StripOffsets	圖像資料位置
RowsPerStrip	每帶行數(shù)
StripByteCounts	每壓縮帶比特?cái)?shù)
JPEGInterchangeFormat	JPEG SOI 偏移量
JPEGInterchangeFormatLength	JPEG 比特?cái)?shù)
TransferFunction	轉(zhuǎn)移功能
WhitePoint	白點(diǎn)色度
PrimaryChromaticities	主要色度
YCbCrCoefficients	顏色空間轉(zhuǎn)換矩陣系數(shù)
ReferenceBlackWhite	黑白參照值
DateTime	日期和時(shí)間
ImageDescription	圖像描述、來(lái)源
Make	生產(chǎn)者
Model	型號(hào)
Software	軟件
Artist	作者
Copyright	版權(quán)信息
GPSVersionID	GPS 版本
GPSLatitudeRef	南北緯
GPSLatitude	緯度
GPSLongitudeRef	東西經(jīng)
GPSLongitude	經(jīng)度
GPSAltitudeRef	海拔參照值
GPSAltitude	海拔
GPSTimeStamp	GPS 時(shí)間戳
GPSSatellites	測(cè)量的衛(wèi)星
GPSStatus	接收器狀態(tài)
GPSMeasureMode	測(cè)量模式
GPSDOP	測(cè)量精度
GPSSpeedRef	速度單位
GPSSpeed	GPS 接收器速度
GPSTrackRef	移動(dòng)方位參照
GPSTrack	移動(dòng)方位
GPSImgDirectionRef	圖像方位參照
GPSImgDirection	圖像方位
GPSMapDatum	地理測(cè)量資料
GPSDestLatitudeRef	目標(biāo)緯度參照
GPSDestLatitude	目標(biāo)緯度
GPSDestLongitudeRef	目標(biāo)經(jīng)度參照
GPSDestLongitude	目標(biāo)經(jīng)度
GPSDestBearingRef	目標(biāo)方位參照
GPSDestBearing	目標(biāo)方位
GPSDestDistanceRef	目標(biāo)距離參照
GPSDestDistance	目標(biāo)距離
GPSProcessingMethod	GPS 處理方法名
GPSAreaInformation	GPS 區(qū)功能變數(shù)名
GPSDateStamp	GPS 日期
GPSDifferential	GPS 修正