Exif data

first it is important to take a decision where exif data should be read, in the client browser or on server?

In the case of the client browser, you have to use other npm packages, and you have to create a React or Svelte component. In another case exif data can be read on server and rendered as HTML, you do not need to execute JavaScript in the page in the client browser.

ChatGPT made a suggestion to use three different libraries for a server-side solution:

1. exifr
2. exif
3. exiftool-vendored

There are real working links to real libraries, and I tried the first one exifr here on this page.

Implementation Steps

1. install a library with npm

npm install exifr --save

2. import library into the .astro fiel for a single gallery page

import pkg from 'exifr';
import * as fs from 'fs';

3. define parse function from exifr package

const {parse} = pkg;

4. read file and parse exif data

const filePath = './public' + image.url;
const buffer = fs.readFileSync(filePath);
const exif = await parse(buffer, {exif: true});

5. show exif data as JSON in HTML

<pre>{JSON.stringify(exif, null, 2)}</pre>