Extract Metadata from Images in the Browser Using JavaScript and EXIF

Reading EXIF metadata directly from image files in the browser is a powerful feature — whether you're building a photo uploader, a metadata inspector, or a tool to strip sensitive data before sharing. In this tutorial, you'll build a native JavaScript EXIF parser using no external libraries and organize your code cleanly into HTML, CSS, and JS files.

✅ What You’ll Learn

How to structure your project using separate files
How to parse EXIF metadata from JPEG files
How to use FileReader, ArrayBuffer, and DataView
How to extract fields like Camera Model, Date Taken, and Orientation

📁 Step 1: Create the Project Structure

Start by creating a new folder, e.g., js-exif-parser, and inside it, create the following files:

bash

1 js-exif-parser/
2 ├── index.html
3 ├── style.css
4 └── script.js

📄 Step 2: Write the HTML (`index.html`)

This file provides the structure: a file input and a placeholder to show the EXIF results.

html

1 <!doctype html>
2 <html lang="en">
3   <head>
4     <meta charset="UTF-8" />
5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6     <title>EXIF Data Viewer</title>
7     <link rel="stylesheet" href="style.css" />
8   </head>
9   <body>
10     <div class="container">
11       <h1>EXIF Data Viewer</h1>
12 
13       <div class="drop-area" id="dropArea">
14         <div class="icon">📁</div>
15         <p>Drag & drop an image here</p>
16         <p>or</p>
17         <div class="file-input-wrapper">
18           <span class="browse-button">Browse Files</span>
19           <input
20             type="file"
21             class="file-input"
22             id="imageInput"
23             accept="image/*"
24           />
25         </div>
26       </div>
27 
28       <div class="image-preview hidden" id="imagePreview">
29         <div class="preview-container" id="previewContainer">
30           <!-- Image preview will be shown here -->
31         </div>
32         <div class="exif-data hidden" id="exifDataDisplay">
33           <!-- EXIF data will be displayed here -->
34         </div>
35       </div>
36     </div>
37 
38     <!-- Loader -->
39     <div class="loader-container" id="loaderContainer">
40       <div class="loader"></div>
41       <div class="loader-text">Processing EXIF data...</div>
42     </div>
43 
44     <script src="script.js"></script>
45   </body>
46 </html>

This HTML file sets up a user interface to upload or drag-and-drop an image, preview it, and then display its EXIF metadata using a separate JavaScript file (script.js).

🎨 Step 3: Add Styling (`style.css`)

css

1 :root {
2   --primary-color: #3498db;
3   --secondary-color: #2980b9;
4   --success-color: #2ecc71;
5   --danger-color: #e74c3c;
6   --text-color: #333;
7   --light-bg: #f5f5f5;
8   --border-color: #ddd;
9 }
10 
11 * {
12   box-sizing: border-box;
13   margin: 0;
14   padding: 0;
15 }
16 
17 body {
18   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
19   line-height: 1.6;
20   color: var(--text-color);
21   background-color: var(--light-bg);
22   padding: 20px;
23 }
24 
25 .container {
26   max-width: 1000px;
27   margin: 0 auto;
28   background-color: white;
29   padding: 30px;
30   border-radius: 8px;
31   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
32 }
33 
34 h1 {
35   text-align: center;
36   margin-bottom: 30px;
37   color: var(--primary-color);
38 }
39 
40 .drop-area {
41   border: 3px dashed var(--border-color);
42   border-radius: 8px;
43   padding: 50px 20px;
44   text-align: center;
45   margin-bottom: 30px;
46   background-color: var(--light-bg);
47   transition: all 0.3s ease;
48   cursor: pointer;
49 }
50 
51 .drop-area.drag-over {
52   border-color: var(--primary-color);
53   background-color: rgba(52, 152, 219, 0.1);
54 }
55 
56 .drop-area p {
57   font-size: 18px;
58   margin-bottom: 15px;
59 }
60 
61 .drop-area .icon {
62   font-size: 48px;
63   color: var(--primary-color);
64   margin-bottom: 15px;
65 }
66 
67 .file-input-wrapper {
68   position: relative;
69   display: inline-block;
70 }
71 
72 .file-input {
73   position: absolute;
74   left: 0;
75   top: 0;
76   opacity: 0;
77   width: 100%;
78   height: 100%;
79   cursor: pointer;
80 }
81 
82 .browse-button {
83   display: inline-block;
84   background-color: var(--primary-color);
85   color: white;
86   padding: 10px 25px;
87   border-radius: 4px;
88   cursor: pointer;
89   font-weight: 500;
90   transition: background-color 0.3s;
91 }
92 
93 .browse-button:hover {
94   background-color: var(--secondary-color);
95 }
96 
97 .image-preview {
98   display: flex;
99   justify-content: space-between;
100   margin-bottom: 30px;
101   height: 300px;
102 }
103 
104 .preview-container {
105   flex: 0 0 48%;
106   height: 100%;
107   border-radius: 8px;
108   overflow: hidden;
109   background-color: var(--light-bg);
110   position: relative;
111   display: flex;
112   align-items: center;
113   justify-content: center;
114 }
115 
116 .preview-container img {
117   max-width: 100%;
118   max-height: 100%;
119   object-fit: contain;
120 }
121 
122 .exif-data {
123   flex: 0 0 48%;
124   height: 100%;
125   overflow-y: auto;
126   padding: 15px;
127   border: 1px solid var(--border-color);
128   border-radius: 8px;
129 }
130 
131 .exif-data.hidden,
132 .image-preview.hidden {
133   display: none;
134 }
135 
136 .exif-group {
137   margin-bottom: 15px;
138 }
139 
140 .exif-group h3 {
141   margin-bottom: 8px;
142   padding-bottom: 5px;
143   border-bottom: 1px solid var(--border-color);
144   color: var(--primary-color);
145 }
146 
147 .exif-item {
148   display: flex;
149   justify-content: space-between;
150   margin-bottom: 5px;
151   padding: 5px 0;
152   border-bottom: 1px dashed var(--border-color);
153 }
154 
155 .exif-label {
156   font-weight: 500;
157   flex: 0 0 50%;
158 }
159 
160 .exif-value {
161   flex: 0 0 50%;
162   text-align: right;
163   word-break: break-word;
164 }
165 
166 /* Loader styles */
167 .loader-container {
168   display: none;
169   position: fixed;
170   top: 0;
171   left: 0;
172   width: 100%;
173   height: 100%;
174   background-color: rgba(255, 255, 255, 0.7);
175   z-index: 1000;
176   justify-content: center;
177   align-items: center;
178 }
179 
180 .loader {
181   border: 5px solid var(--light-bg);
182   border-top: 5px solid var(--primary-color);
183   border-radius: 50%;
184   width: 50px;
185   height: 50px;
186   animation: spin 1s linear infinite;
187 }
188 
189 .loader-text {
190   margin-left: 15px;
191   font-size: 18px;
192   font-weight: 500;
193 }
194 
195 @keyframes spin {
196   0% {
197     transform: rotate(0deg);
198   }
199   100% {
200     transform: rotate(360deg);
201   }
202 }
203 
204 .no-exif-message {
205   text-align: center;
206   padding: 20px;
207   color: var(--danger-color);
208   font-weight: 500;
209 }
210 
211 .gps-map {
212   height: 200px;
213   margin-top: 20px;
214   background-color: var(--light-bg);
215   border-radius: 8px;
216   display: flex;
217   align-items: center;
218   justify-content: center;
219 }
220 
221 .section-title {
222   margin: 30px 0 15px;
223   font-size: 20px;
224   color: var(--primary-color);
225 }
226 
227 @media (max-width: 768px) {
228   .image-preview {
229     flex-direction: column;
230     height: auto;
231   }
232 
233   .preview-container,
234   .exif-data {
235     flex: 0 0 100%;
236     width: 100%;
237     margin-bottom: 20px;
238   }
239 
240   .preview-container {
241     height: 250px;
242   }
243 
244   .exif-data {
245     height: 300px;
246   }
247 }

⚙️ Step 4: Write the JavaScript (script.js)

1 class ExifService {
2   constructor() {
3     this.tiffHeaderOffset = null;
4     this.bigEndian = null;
5     this.tags = {
6       // EXIF tags and their meanings
7       0x0100: "ImageWidth",
8       0x0101: "ImageHeight",
9       0x0102: "BitsPerSample",
10       0x0103: "Compression",
11       0x010e: "ImageDescription",
12       0x010f: "Make",
13       0x0110: "Model",
14       0x0112: "Orientation",
15       0x011a: "XResolution",
16       0x011b: "YResolution",
17       0x0128: "ResolutionUnit",
18       0x0131: "Software",
19       0x0132: "DateTime",
20       0x013b: "Artist",
21       0x0213: "YCbCrPositioning",
22       0x8298: "Copyright",
23       0x8769: "ExifIFDPointer",
24       0x8825: "GPSInfoIFDPointer",
25 
26       // EXIF IFD tags
27       0x829a: "ExposureTime",
28       0x829d: "FNumber",
29       0x8822: "ExposureProgram",
30       0x8827: "ISOSpeedRatings",
31       0x9000: "ExifVersion",
32       0x9003: "DateTimeOriginal",
33       0x9004: "DateTimeDigitized",
34       0x9201: "ShutterSpeedValue",
35       0x9202: "ApertureValue",
36       0x9203: "BrightnessValue",
37       0x9204: "ExposureBiasValue",
38       0x9205: "MaxApertureValue",
39       0x9206: "SubjectDistance",
40       0x9207: "MeteringMode",
41       0x9208: "LightSource",
42       0x9209: "Flash",
43       0x920a: "FocalLength",
44       0x927c: "MakerNote",
45       0x9286: "UserComment",
46       0xa000: "FlashpixVersion",
47       0xa001: "ColorSpace",
48       0xa002: "PixelXDimension",
49       0xa003: "PixelYDimension",
50       0xa004: "RelatedSoundFile",
51       0xa005: "InteroperabilityIFDPointer",
52       0xa20e: "FocalPlaneXResolution",
53       0xa20f: "FocalPlaneYResolution",
54       0xa210: "FocalPlaneResolutionUnit",
55       0xa217: "SensingMethod",
56       0xa300: "FileSource",
57       0xa301: "SceneType",
58       0xa302: "CFAPattern",
59       0xa401: "CustomRendered",
60       0xa402: "ExposureMode",
61       0xa403: "WhiteBalance",
62       0xa404: "DigitalZoomRatio",
63       0xa405: "FocalLengthIn35mmFilm",
64       0xa406: "SceneCaptureType",
65       0xa407: "GainControl",
66       0xa408: "Contrast",
67       0xa409: "Saturation",
68       0xa40a: "Sharpness",
69       0xa40b: "DeviceSettingDescription",
70       0xa40c: "SubjectDistanceRange",
71 
72       // GPS tags
73       0x0000: "GPSVersionID",
74       0x0001: "GPSLatitudeRef",
75       0x0002: "GPSLatitude",
76       0x0003: "GPSLongitudeRef",
77       0x0004: "GPSLongitude",
78       0x0005: "GPSAltitudeRef",
79       0x0006: "GPSAltitude",
80       0x0007: "GPSTimeStamp",
81       0x0008: "GPSSatellites",
82       0x0009: "GPSStatus",
83       0x000a: "GPSMeasureMode",
84       0x000b: "GPSDOP",
85       0x000c: "GPSSpeedRef",
86       0x000d: "GPSSpeed",
87       0x000e: "GPSTrackRef",
88       0x000f: "GPSTrack",
89       0x0010: "GPSImgDirectionRef",
90       0x0011: "GPSImgDirection",
91       0x0012: "GPSMapDatum",
92       0x0013: "GPSDestLatitudeRef",
93       0x0014: "GPSDestLatitude",
94       0x0015: "GPSDestLongitudeRef",
95       0x0016: "GPSDestLongitude",
96       0x0017: "GPSDestBearingRef",
97       0x0018: "GPSDestBearing",
98       0x0019: "GPSDestDistanceRef",
99       0x001a: "GPSDestDistance",
100       0x001b: "GPSProcessingMethod",
101       0x001c: "GPSAreaInformation",
102       0x001d: "GPSDateStamp",
103       0x001e: "GPSDifferential",
104     };
105 
106     // Orientation values
107     this.orientationDescriptions = {
108       1: "Normal",
109       2: "Mirrored horizontally",
110       3: "Rotated 180°",
111       4: "Mirrored vertically",
112       5: "Mirrored horizontally and rotated 90° CCW",
113       6: "Rotated 90° CW",
114       7: "Mirrored horizontally and rotated 90° CW",
115       8: "Rotated 90° CCW",
116     };
117   }
118 
119   /**
120    * Process an image file and extract its EXIF data
121    * @param {File|Blob} imageFile - The image file to process
122    * @returns {Promise<Object>} - A promise that resolves to an object containing EXIF data
123    */
124   extractExifData(imageFile) {
125     return new Promise((resolve, reject) => {
126       if (
127         !imageFile ||
128         !["image/jpeg", "image/jpg", "image/tiff"].includes(imageFile.type)
129       ) {
130         reject(
131           new Error(
132             "Unsupported file type. Only JPEG and TIFF formats support EXIF."
133           )
134         );
135         return;
136       }
137 
138       const reader = new FileReader();
139 
140       reader.onload = (e) => {
141         try {
142           const buffer = e.target.result;
143           const dataView = new DataView(buffer);
144 
145           // Check for JPEG format
146           if (dataView.getUint8(0) !== 0xff || dataView.getUint8(1) !== 0xd8) {
147             reject(new Error("Not a valid JPEG"));
148             return;
149           }
150 
151           const exifData = this.parseExifData(dataView);
152           resolve(exifData);
153         } catch (error) {
154           reject(new Error(`Error processing EXIF data: ${error.message}`));
155         }
156       };
157 
158       reader.onerror = () => {
159         reject(new Error("Error reading file"));
160       };
161 
162       reader.readAsArrayBuffer(imageFile);
163     });
164   }
165 
166   /**
167    * Parse EXIF data from a DataView object
168    * @param {DataView} dataView - The DataView containing the image data
169    * @returns {Object} - An object containing the parsed EXIF data
170    */
171   parseExifData(dataView) {
172     const length = dataView.byteLength;
173     let offset = 2; // Skip the first two bytes (JPEG marker)
174     const exifData = {};
175 
176     // Search for the EXIF APP1 marker (0xFFE1)
177     while (offset < length) {
178       if (dataView.getUint8(offset) !== 0xff) {
179         offset++;
180         continue;
181       }
182 
183       const marker = dataView.getUint8(offset + 1);
184 
185       // If we found the EXIF APP1 marker
186       if (marker === 0xe1) {
187         const exifOffset = offset + 4; // Skip marker and size
188         const exifLength = dataView.getUint16(offset + 2, false);
189 
190         // Check for "Exif\0\0" header
191         if (
192           this.getStringFromCharCodes(dataView, exifOffset, 6) === "Exif\0\0"
193         ) {
194           return this.readExifTags(dataView, exifOffset + 6, exifLength - 6);
195         }
196       } else if (marker === 0xda) {
197         // Start of Scan marker - no more metadata
198         break;
199       }
200 
201       // Move to the next marker
202       offset += 2 + dataView.getUint16(offset + 2, false);
203     }
204 
205     return exifData;
206   }
207 
208   /**
209    * Read EXIF tags from the specified offset
210    * @param {DataView} dataView - The DataView containing the image data
211    * @param {number} start - The offset to start reading from
212    * @param {number} length - The length of data to read
213    * @returns {Object} - An object containing the parsed EXIF tags
214    */
215   readExifTags(dataView, start, length) {
216     const result = {};
217 
218     // Determine endianness
219     if (dataView.getUint16(start) === 0x4949) {
220       this.bigEndian = false; // Little endian
221     } else if (dataView.getUint16(start) === 0x4d4d) {
222       this.bigEndian = true; // Big endian
223     } else {
224       throw new Error("Invalid TIFF data: endianness marker not found");
225     }
226 
227     // Check for TIFF marker
228     if (dataView.getUint16(start + 2, !this.bigEndian) !== 0x002a) {
229       throw new Error("Invalid TIFF data: TIFF marker not found");
230     }
231 
232     // Get offset to first IFD (Image File Directory)
233     const firstIFDOffset = dataView.getUint32(start + 4, !this.bigEndian);
234     this.tiffHeaderOffset = start;
235 
236     // Read the main IFD
237     const ifdData = this.readIFD(
238       dataView,
239       this.tiffHeaderOffset + firstIFDOffset
240     );
241     Object.assign(result, ifdData);
242 
243     // Check for and read Exif sub-IFD if it exists
244     if (ifdData.ExifIFDPointer) {
245       const exifData = this.readIFD(
246         dataView,
247         this.tiffHeaderOffset + ifdData.ExifIFDPointer
248       );
249       result.exif = exifData;
250       delete result.ExifIFDPointer;
251     }
252 
253     // Check for and read GPS sub-IFD if it exists
254     if (ifdData.GPSInfoIFDPointer) {
255       const gpsData = this.readIFD(
256         dataView,
257         this.tiffHeaderOffset + ifdData.GPSInfoIFDPointer
258       );
259       result.gps = gpsData;
260       delete result.GPSInfoIFDPointer;
261     }
262 
263     // Add orientation description if orientation exists
264     if (result.Orientation) {
265       result.OrientationDescription =
266         this.orientationDescriptions[result.Orientation] || "Unknown";
267     }
268 
269     return result;
270   }
271 
272   /**
273    * Read an Image File Directory
274    * @param {DataView} dataView - The DataView containing the image data
275    * @param {number} offset - The offset to start reading from
276    * @returns {Object} - An object containing the parsed IFD entries
277    */
278   readIFD(dataView, offset) {
279     const result = {};
280     const numEntries = dataView.getUint16(offset, !this.bigEndian);
281 
282     for (let i = 0; i < numEntries; i++) {
283       const entryOffset = offset + 2 + i * 12; // 12 bytes per entry
284       const tagNumber = dataView.getUint16(entryOffset, !this.bigEndian);
285       const dataType = dataView.getUint16(entryOffset + 2, !this.bigEndian);
286       const numValues = dataView.getUint32(entryOffset + 4, !this.bigEndian);
287       const valueOffset = dataView.getUint32(entryOffset + 8, !this.bigEndian);
288 
289       // Get tag name if known, otherwise use hex code
290       const tagName = this.tags[tagNumber] || `0x${tagNumber.toString(16)}`;
291 
292       // Get tag value
293       let tagValue;
294       const totalSize = this.getDataTypeSize(dataType) * numValues;
295 
296       if (totalSize <= 4) {
297         // Value is stored in the offset field itself
298         tagValue = this.readTagValue(
299           dataView,
300           entryOffset + 8,
301           dataType,
302           numValues
303         );
304       } else {
305         // Value is stored at the specified offset
306         tagValue = this.readTagValue(
307           dataView,
308           this.tiffHeaderOffset + valueOffset,
309           dataType,
310           numValues
311         );
312       }
313 
314       result[tagName] = tagValue;
315     }
316 
317     return result;
318   }
319 
320   /**
321    * Get the size in bytes of a specific data type
322    * @param {number} dataType - The EXIF data type
323    * @returns {number} - The size in bytes
324    */
325   getDataTypeSize(dataType) {
326     const sizes = {
327       1: 1, // BYTE
328       2: 1, // ASCII
329       3: 2, // SHORT
330       4: 4, // LONG
331       5: 8, // RATIONAL
332       6: 1, // SBYTE
333       7: 1, // UNDEFINED
334       8: 2, // SSHORT
335       9: 4, // SLONG
336       10: 8, // SRATIONAL
337       11: 4, // FLOAT
338       12: 8, // DOUBLE
339     };
340 
341     return sizes[dataType] || 0;
342   }
343 
344   /**
345    * Read a tag value based on its data type
346    * @param {DataView} dataView - The DataView containing the image data
347    * @param {number} offset - The offset to start reading from
348    * @param {number} dataType - The data type of the value
349    * @param {number} numValues - The number of values to read
350    * @returns {*} - The parsed tag value
351    */
352   readTagValue(dataView, offset, dataType, numValues) {
353     let values = [];
354     let i, size;
355 
356     switch (dataType) {
357       case 1: // BYTE
358       case 6: // SBYTE
359       case 7: // UNDEFINED
360         for (i = 0; i < numValues; i++) {
361           values.push(dataView.getUint8(offset + i));
362         }
363         break;
364 
365       case 2: // ASCII
366         // Read null-terminated ASCII string
367         const chars = [];
368         for (i = 0; i < numValues; i++) {
369           const charCode = dataView.getUint8(offset + i);
370           if (charCode === 0) break;
371           chars.push(charCode);
372         }
373         return String.fromCharCode(...chars);
374 
375       case 3: // SHORT
376         size = 2;
377         for (i = 0; i < numValues; i++) {
378           values.push(dataView.getUint16(offset + i * size, !this.bigEndian));
379         }
380         break;
381 
382       case 8: // SSHORT
383         size = 2;
384         for (i = 0; i < numValues; i++) {
385           values.push(dataView.getInt16(offset + i * size, !this.bigEndian));
386         }
387         break;
388 
389       case 4: // LONG
390         size = 4;
391         for (i = 0; i < numValues; i++) {
392           values.push(dataView.getUint32(offset + i * size, !this.bigEndian));
393         }
394         break;
395 
396       case 9: // SLONG
397         size = 4;
398         for (i = 0; i < numValues; i++) {
399           values.push(dataView.getInt32(offset + i * size, !this.bigEndian));
400         }
401         break;
402 
403       case 5: // RATIONAL
404         size = 8;
405         for (i = 0; i < numValues; i++) {
406           const numerator = dataView.getUint32(
407             offset + i * size,
408             !this.bigEndian
409           );
410           const denominator = dataView.getUint32(
411             offset + i * size + 4,
412             !this.bigEndian
413           );
414           values.push(numerator / denominator);
415         }
416         break;
417 
418       case 10: // SRATIONAL
419         size = 8;
420         for (i = 0; i < numValues; i++) {
421           const numerator = dataView.getInt32(
422             offset + i * size,
423             !this.bigEndian
424           );
425           const denominator = dataView.getInt32(
426             offset + i * size + 4,
427             !this.bigEndian
428           );
429           values.push(numerator / denominator);
430         }
431         break;
432 
433       default:
434         values = [dataType, numValues]; // Return the data type and count for unknown types
435     }
436 
437     // If there's only one value, return it directly instead of an array
438     return numValues === 1 ? values[0] : values;
439   }
440 
441   /**
442    * Convert array of character codes to a string
443    * @param {DataView} dataView - The DataView containing the data
444    * @param {number} start - The start offset
445    * @param {number} length - The number of characters to read
446    * @returns {string} - The resulting string
447    */
448   getStringFromCharCodes(dataView, start, length) {
449     const chars = [];
450     for (let i = 0; i < length; i++) {
451       chars.push(dataView.getUint8(start + i));
452     }
453     return String.fromCharCode(...chars);
454   }
455 }
456 
457 // DOM Elements
458 const imageInput = document.getElementById("imageInput");
459 const dropArea = document.getElementById("dropArea");
460 const previewContainer = document.getElementById("previewContainer");
461 const imagePreview = document.getElementById("imagePreview");
462 const exifDataDisplay = document.getElementById("exifDataDisplay");
463 const loaderContainer = document.getElementById("loaderContainer");
464 
465 // Initialize EXIF service
466 const exifService = new ExifService();
467 
468 // Format tag names for display (convert camelCase to Title Case with spaces)
469 function formatTagName(tag) {
470   // Handle special cases
471   if (tag === "FNumber") return "F-Number";
472   if (tag === "ISOSpeedRatings") return "ISO";
473 
474   // Add space before capital letters and capitalize first letter
475   return tag
476     .replace(/([A-Z])/g, " $1")
477     .replace(/^./, (str) => str.toUpperCase())
478     .trim();
479 }
480 
481 // Format tag values based on their type
482 function formatTagValue(value, tag) {
483   if (value === undefined || value === null) return "Unknown";
484 
485   // Handle arrays
486   if (Array.isArray(value)) {
487     // For GPS coordinates
488     if (tag === "GPSLatitude" || tag === "GPSLongitude") {
489       return value.map((v) => v.toFixed(6)).join(", ");
490     }
491     return value.join(", ");
492   }
493 
494   // Handle specific tags
495   switch (tag) {
496     case "ExposureTime":
497       // Format as fraction if less than 1
498       if (value < 1) {
499         const denominator = Math.round(1 / value);
500         return `1/${denominator} sec`;
501       }
502       return `${value.toFixed(2)} sec`;
503 
504     case "FNumber":
505       return `f/${value.toFixed(1)}`;
506 
507     case "FocalLength":
508     case "FocalLengthIn35mmFilm":
509       return `${Math.round(value)}mm`;
510 
511     case "ExposureBiasValue":
512       const sign = value > 0 ? "+" : "";
513       return `${sign}${value.toFixed(1)} EV`;
514 
515     default:
516       // For numeric values, format with 2 decimal places if needed
517       if (typeof value === "number" && !Number.isInteger(value)) {
518         return value.toFixed(2);
519       }
520       return value.toString();
521   }
522 }
523 
524 // Convert GPS coordinates to decimal degrees
525 function convertGPSToDecimal(coordinates, ref) {
526   if (!coordinates || coordinates.length !== 3) {
527     return null;
528   }
529 
530   // Calculate decimal degrees: degrees + minutes/60 + seconds/3600
531   let decimal = coordinates[0] + coordinates[1] / 60 + coordinates[2] / 3600;
532 
533   // If south or west, make negative
534   if (ref === "S" || ref === "W") {
535     decimal = -decimal;
536   }
537 
538   return decimal;
539 }
540 
541 // Process the selected image
542 async function processImage(file) {
543   if (!file || !file.type.startsWith("image/")) {
544     alert("Please select a valid image file");
545     return;
546   }
547 
548   // Show loader
549   loaderContainer.style.display = "flex";
550 
551   // Display image preview
552   const reader = new FileReader();
553   reader.onload = (e) => {
554     const img = new Image();
555     img.src = e.target.result;
556     img.onload = () => {
557       // Clear previous image
558       previewContainer.innerHTML = "";
559       previewContainer.appendChild(img);
560       imagePreview.classList.remove("hidden");
561     };
562   };
563   reader.readAsDataURL(file);
564 
565   // Process EXIF data
566   try {
567     const exifData = await exifService.extractExifData(file);
568     displayExifData(exifData);
569   } catch (error) {
570     console.error(error);
571     exifDataDisplay.innerHTML = `
572                     <div class="no-exif-message">
573                         <p>No EXIF data found or error processing the image.</p>
574                         <p>Error: ${error.message}</p>
575                     </div>
576                 `;
577     exifDataDisplay.classList.remove("hidden");
578   } finally {
579     // Hide loader
580     loaderContainer.style.display = "none";
581   }
582 }
583 
584 // Display EXIF data in the UI
585 function displayExifData(data) {
586   // Clear previous data
587   exifDataDisplay.innerHTML = "";
588 
589   if (!data || Object.keys(data).length === 0) {
590     exifDataDisplay.innerHTML = `
591               <div class="no-exif-message">
592                 <p>No EXIF data found in this image.</p>
593               </div>
594             `;
595     exifDataDisplay.classList.remove("hidden");
596     return;
597   }
598 
599   // Basic image information
600   let html = '<div class="exif-group">';
601   html += "<h3>Basic Information</h3>";
602 
603   const basicTags = [
604     "Make",
605     "Model",
606     "Software",
607     "DateTime",
608     "Artist",
609     "Copyright",
610     "ImageWidth",
611     "ImageHeight",
612     "Orientation",
613     "OrientationDescription",
614   ];
615 
616   basicTags.forEach((tag) => {
617     if (data[tag] !== undefined) {
618       html += `
619                 <div class="exif-item">
620                   <div class="exif-label">${formatTagName(tag)}</div>
621                   <div class="exif-value">${formatTagValue(data[tag], tag)}</div>
622                 </div>
623               `;
624     }
625   });
626 
627   html += "</div>";
628 
629   // EXIF specific data
630   if (data.exif && Object.keys(data.exif).length > 0) {
631     html += '<div class="exif-group">';
632     html += "<h3>Camera Settings</h3>";
633 
634     const exifTags = [
635       "ExposureTime",
636       "FNumber",
637       "ExposureProgram",
638       "ISOSpeedRatings",
639       "DateTimeOriginal",
640       "DateTimeDigitized",
641       "ShutterSpeedValue",
642       "ApertureValue",
643       "BrightnessValue",
644       "ExposureBiasValue",
645       "MaxApertureValue",
646       "SubjectDistance",
647       "MeteringMode",
648       "LightSource",
649       "Flash",
650       "FocalLength",
651       "FocalLengthIn35mmFilm",
652       "WhiteBalance",
653       "SceneCaptureType",
654     ];
655 
656     exifTags.forEach((tag) => {
657       if (data.exif[tag] !== undefined) {
658         html += `
659                   <div class="exif-item">
660                     <div class="exif-label">${formatTagName(tag)}</div>
661                     <div class="exif-value">${formatTagValue(data.exif[tag], tag)}</div>
662                   </div>
663                 `;
664       }
665     });
666 
667     html += "</div>";
668   }
669 
670   // GPS data
671   if (data.gps && Object.keys(data.gps).length > 0) {
672     html += '<div class="exif-group">';
673     html += "<h3>GPS Information</h3>";
674 
675     // Process GPS coordinates if available
676     let latitude = null;
677     let longitude = null;
678 
679     if (data.gps.GPSLatitude && data.gps.GPSLatitudeRef) {
680       latitude = convertGPSToDecimal(
681         data.gps.GPSLatitude,
682         data.gps.GPSLatitudeRef
683       );
684     }
685 
686     if (data.gps.GPSLongitude && data.gps.GPSLongitudeRef) {
687       longitude = convertGPSToDecimal(
688         data.gps.GPSLongitude,
689         data.gps.GPSLongitudeRef
690       );
691     }
692 
693     // Display GPS coordinates in a user-friendly format
694     if (latitude !== null && longitude !== null) {
695       html += `
696                 <div class="exif-item">
697                   <div class="exif-label">Coordinates</div>
698                   <div class="exif-value">${latitude.toFixed(6)}, ${longitude.toFixed(6)}</div>
699                 </div>
700               `;
701     }
702 
703     // Display other GPS information
704     for (const [tag, value] of Object.entries(data.gps)) {
705       // Skip latitude and longitude as we've already displayed them in a combined format
706       if (
707         [
708           "GPSLatitude",
709           "GPSLatitudeRef",
710           "GPSLongitude",
711           "GPSLongitudeRef",
712         ].includes(tag)
713       ) {
714         continue;
715       }
716 
717       html += `
718                 <div class="exif-item">
719                   <div class="exif-label">${formatTagName(tag)}</div>
720                   <div class="exif-value">${formatTagValue(value, tag)}</div>
721                 </div>
722               `;
723     }
724 
725     html += "</div>";
726   }
727 
728   // Set the HTML content and show the display
729   exifDataDisplay.innerHTML = html;
730   exifDataDisplay.classList.remove("hidden");
731 }
732 
733 // Add event listeners
734 document.addEventListener("DOMContentLoaded", () => {
735   // File input change event
736   imageInput.addEventListener("change", (e) => {
737     if (e.target.files && e.target.files[0]) {
738       processImage(e.target.files[0]);
739     }
740   });
741 
742   // Drag and drop events
743   dropArea.addEventListener("dragover", (e) => {
744     e.preventDefault();
745     dropArea.classList.add("drag-over");
746   });
747 
748   dropArea.addEventListener("dragleave", () => {
749     dropArea.classList.remove("drag-over");
750   });
751 
752   dropArea.addEventListener("drop", (e) => {
753     e.preventDefault();
754     dropArea.classList.remove("drag-over");
755 
756     if (e.dataTransfer.files && e.dataTransfer.files[0]) {
757       processImage(e.dataTransfer.files[0]);
758     }
759   });
760 
761   // Click on drop area to trigger file input
762   dropArea.addEventListener("click", () => {
763     imageInput.click();
764   });
765 });

This code is a JavaScript implementation of an EXIF data extraction service for images. EXIF (Exchangeable Image File Format) is metadata embedded in image files like JPEGs and TIFFs that contains information about the camera settings, date/time, location, and other details of when the photo was taken.

Here's a breakdown of how this code works:

1. ExifService Class

This is the main class responsible for extracting and parsing EXIF data from image files. It contains:

A constructor that initializes properties and a comprehensive dictionary of EXIF tags with their meanings
Methods to extract and parse EXIF data from image files
Helper functions to read different data types from binary data

2. DOM Elements and UI Management

The code defines various DOM elements for the user interface:

File input for selecting images
Drop area for drag-and-drop functionality
Preview container to display the selected image
Display area for showing the extracted EXIF data
Loading indicator

3. Data Processing and Display Functions

Several helper functions format and display the extracted EXIF data:

formatTagName() - Converts technical tag names to user-friendly display names
formatTagValue() - Formats tag values based on their type (e.g., exposure time as fractions)
convertGPSToDecimal() - Converts GPS coordinates to decimal degrees
processImage() - Main function that handles the selected image
displayExifData() - Creates HTML to show the extracted EXIF data

How It Works

Loading an Image: The user can select an image by clicking the drop area (which triggers a file input) or by dragging and dropping an image.
EXIF Extraction Process:
- The image file is read as an ArrayBuffer using FileReader
- The binary data is analyzed to find the EXIF APP1 marker (0xFFE1)
- The code determines the endianness (byte order) of the data
- It reads the Image File Directory (IFD) structures containing the EXIF tags
- Special handling is applied for sub-directories like the EXIF IFD and GPS IFD
Data Display:
- The extracted data is organized into sections: Basic Information, Camera Settings, and GPS Information
- Values are formatted appropriately (e.g., exposure time as fractions, f-numbers with "f/" prefix)
- GPS coordinates are converted to decimal format for easy readability

Technical Details

The code handles several complex aspects of EXIF parsing:

Endianness Detection: EXIF data can be in either big-endian (0x4D4D) or little-endian (0x4949) format
Data Type Handling: EXIF uses various data types (BYTE, ASCII, SHORT, LONG, RATIONAL, etc.)
IFD Parsing: Image File Directories contain tag entries with different data types and sizes
Value Reading: Values can be stored directly in the tag or referenced via an offset depending on size

Usage Flow

User selects or drops an image file
A preview of the image is displayed
The EXIF service extracts metadata from the image
The metadata is formatted and displayed in a user-friendly way
If no EXIF data is found or an error occurs, an appropriate message is shown

This implementation is entirely in JavaScript and runs in the browser, making it suitable for client-side image analysis without requiring server processing for the EXIF extraction.

🧾 Full Code

Below is the complete code for your JavaScript-based EXIF metadata parser.