exif.js獲取圖片原始信息的實現(xiàn)
更新時間：2025年05月08日 11:32:14 作者：前端小白_50332439
exif-js?是一個JavaScript庫,用于讀取圖片的EXIF信息,本文就來介紹一下exif.js獲取圖片原始信息的實現(xiàn),感興趣的可以了解一下
前言
Exif.js 提供了 JavaScript 讀取圖像的原始數(shù)據(jù)的功能擴展，例如：拍照方向、相機設備型號、拍攝時間、ISO 感光度、GPS 地理位置等數(shù)據(jù)。
一、Exif.js 是什么？
exif-js 是一個JavaScript庫，用于讀取圖片的EXIF信息。EXIF信息包括拍攝時間、相機型號、焦距等元數(shù)據(jù)。EXIF 標準僅適用于.jpg和.tiff圖像。
注意：exif 數(shù)據(jù)主要來自拍攝的照片，多用于移動端開發(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編碼數(shù)據(jù)
EXIF.getData(data, function() { // 使用EXIF.js讀取數(shù)據(jù)
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) | 獲取圖像的數(shù)據(jù) 能兼容尚未支持提供 EXIF 數(shù)據(jù)的瀏覽器獲取到元數(shù)據(jù)。 |
| EXIF.getTag(img, tag) | 獲取圖像的某個數(shù)據(jù) |
| EXIF.getAllTags(img) | 獲取圖像的全部數(shù)據(jù)，值以對象的方式返回 |
| EXIF.pretty(img) | 獲取圖像的全部數(shù)據(jù)，值以字符串的方式返回 |
| 屬性 | 說明 |
|---|---|
| ExifVersion | Exif 版本 |
| FlashPixVersion | FlashPix 版本 |
| ColorSpace | 色域、色彩空間 |
| PixelXDimension | 圖像的有效寬度 |
| PixelYDimension | 圖像的有效高度 |
| ComponentsConfiguration | 圖像構造 |
| CompressedBitsPerPixel | 壓縮時每像素色彩位 |
| MakerNote | 制造商設置的信息 |
| UserComment | 用戶評論 |
| RelatedSoundFile | 關聯(lián)的聲音文件 |
| DateTimeOriginal | 創(chuàng)建時間 |
| DateTimeDigitized | 數(shù)字化創(chuàng)建時間 |
| SubsecTime | 日期時間（秒） |
| SubsecTimeOriginal | 原始日期時間（秒） |
| SubsecTimeDigitized | 原始日期時間數(shù)字化（秒） |
| 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 | 曝光指數(shù) |
| SensingMethod | 圖像傳感器類型 |
| FileSource | 源文件 |
| SceneType | 場景類型（1 == 直接拍攝） |
| CFAPattern | CFA 模式 |
| CustomRendered | 自定義圖像處理 |
| ExposureMode | 曝光模式 |
| WhiteBalance | 白平衡（1 == 自動，2 == 手動） |
| DigitalZoomRation | 數(shù)字變焦 |
| FocalLengthIn35mmFilm | 35毫米膠片焦距 |
| SceneCaptureType | 場景拍攝類型 |
| GainControl | 場景控制 |
| Contrast | 對比度 |
| Saturation | 飽和度 |
| Sharpness | 銳度 |
| DeviceSettingDescription | 設備設定描述 |
| SubjectDistanceRange | 主體距離范圍 |
| InteroperabilityIFDPointer | |
| ImageUniqueID | 圖像唯一ID |
| ImageWidth | 圖像寬度 |
| ImageHeight | 圖像高度 |
| BitsPerSample | 比特采樣率 |
| Compression | 壓縮方法 |
| PhotometricInterpretation | 像素合成 |
| Orientation | 拍攝方向 |
| SamplesPerPixel | 像素數(shù) |
| PlanarConfiguration | 數(shù)據(jù)排列 |
| YCbCrSubSampling | 色相抽樣比率 |
| YCbCrPositioning | 色相配置 |
| XResolution | X方向分辨率 |
| YResolution | Y方向分辨率 |
| ResolutionUnit | 分辨率單位 |
| StripOffsets | 圖像資料位置 |
| RowsPerStrip | 每帶行數(shù) |
| StripByteCounts | 每壓縮帶比特數(shù) |
| JPEGInterchangeFormat | JPEG SOI 偏移量 |
| JPEGInterchangeFormatLength | JPEG 比特數(shù) |
| TransferFunction | 轉移功能 |
| WhitePoint | 白點色度 |
| PrimaryChromaticities | 主要色度 |
| YCbCrCoefficients | 顏色空間轉換矩陣系數(shù) |
| ReferenceBlackWhite | 黑白參照值 |
| DateTime | 日期和時間 |
| ImageDescription | 圖像描述、來源 |
| Make | 生產(chǎn)者 |
| Model | 型號 |
| Software | 軟件 |
| Artist | 作者 |
| Copyright | 版權信息 |
| GPSVersionID | GPS 版本 |
| GPSLatitudeRef | 南北緯 |
| GPSLatitude | 緯度 |
| GPSLongitudeRef | 東西經(jīng) |
| GPSLongitude | 經(jīng)度 |
| GPSAltitudeRef | 海拔參照值 |
| GPSAltitude | 海拔 |
| GPSTimeStamp | GPS 時間戳 |
| GPSSatellites | 測量的衛(wèi)星 |
| GPSStatus | 接收器狀態(tài) |
| GPSMeasureMode | 測量模式 |
| GPSDOP | 測量精度 |
| GPSSpeedRef | 速度單位 |
| GPSSpeed | GPS 接收器速度 |
| GPSTrackRef | 移動方位參照 |
| GPSTrack | 移動方位 |
| GPSImgDirectionRef | 圖像方位參照 |
| GPSImgDirection | 圖像方位 |
| GPSMapDatum | 地理測量資料 |
| GPSDestLatitudeRef | 目標緯度參照 |
| GPSDestLatitude | 目標緯度 |
| GPSDestLongitudeRef | 目標經(jīng)度參照 |
| GPSDestLongitude | 目標經(jīng)度 |
| GPSDestBearingRef | 目標方位參照 |
| GPSDestBearing | 目標方位 |
| GPSDestDistanceRef | 目標距離參照 |
| GPSDestDistance | 目標距離 |
| GPSProcessingMethod | GPS 處理方法名 |
| GPSAreaInformation | GPS 區(qū)功能變數(shù)名 |
| GPSDateStamp | GPS 日期 |
| GPSDifferential | GPS 修正 |
總結
到此這篇關于exif.js獲取圖片原始信息的實現(xiàn)的文章就介紹到這了,更多相關exif.js獲取圖片信息內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JS實現(xiàn)上傳圖片的三種方法并實現(xiàn)預覽圖片功能
在用戶注冊頁面，需要用戶在本地選擇一張圖片作為頭像，并同時預覽，實現(xiàn)思路有兩種，具體實現(xiàn)方法和實例代碼大家參考下本文2017-07-07
這篇文章主要介紹了JS設計模式之策略模式概念與用法,簡單分析了策略模式的基本概念、原理并結合實例形式分析了javascript實現(xiàn)與使用策略模式的相關操作技巧,需要的朋友可以參考下2018-02-02![JS中的==運算： [''''] == false —>true](http://img.jbzj.com/images/xgimg/bcimg2.png)
JS中的==運算： [''''] == false —>true
這篇文章主要介紹了JS中的==運算： [''] == false —>true的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
本篇文章主要介紹了淺談PDF.js使用心得，pdf.js 是一個技術原型主要用于在 HTML5 平臺上展示 PDF 文檔，無需任何本地技術支持。非常具有實用價值，需要的朋友可以參考下2018-06-06
javascript靜態(tài)頁面?zhèn)髦档娜N方法分享
這篇文章介紹了javascript靜態(tài)頁面?zhèn)髦档娜N方法及優(yōu)缺點，有需要的朋友可以參考一下2013-11-11
JS寫XSS cookie stealer來竊取密碼的步驟詳解
JavaScript是web中最常用的腳本開發(fā)語言，js可以自動執(zhí)行站點組件，管理站點內容，在web業(yè)內實現(xiàn)其他有用的函數(shù)。這篇文章主要介紹了JS寫XSS cookie stealer來竊取密碼的步驟詳解,需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細介紹了JavaScript注冊時密碼強度校驗代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)視頻鏡面反轉的效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
深入分析escape()、encodeURI()、encodeURIComponent()的區(qū)別及示例
這篇文章主要介紹了escape()、encodeURI()、encodeURIComponent()的區(qū)別,需要的朋友可以參考下2014-08-08
JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法
這篇文章主要介紹了JS根據(jù)瀏覽器窗口大小實時動態(tài)改變網(wǎng)頁文字大小的方法,涉及JavaScript針對頁面寬高的動態(tài)獲取與元素樣式動態(tài)運算的相關技巧,需要的朋友可以參考下2016-02-02