feat(exif): sort images by EXIF date

obviyus · Jul 21, 2022 · c9b88b1 · c9b88b1
1 parent 5cd6be5
commit c9b88b1
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 17 deletions.
diff --git a/app/routes/image/$name.tsx b/app/routes/image/$name.tsx
@@ -15,7 +15,7 @@ export const loader: LoaderFunction = async ({ params, }) => {
         title: name,
         image: image.original,
         width: image.width,
-        date: image.date,
+        date: image.readableDate,
         height: image.height,
     };
 }

diff --git a/config.ts b/config.ts
@@ -0,0 +1,6 @@
+export const config = {
+    title: "Galerie d'Ayaan",
+    description: "Ayaan Zaidi's personal image feed. Mild obsession with aircrafts and shiny things. Mostly shot on a mobile camera.",
+    keywords: "ayaan zaidi, photography, remix",
+    url: "https://gallery.obviy.us",
+}
diff --git a/public/importer.mjs → importer.mjs b/public/importer.mjs → importer.mjs
@@ -1,13 +1,10 @@
 import * as fs from "fs";
 import sharp from "sharp";
+import ExifReader from "exifreader";
+import { parse } from "fecha";
 
 function imageLister() {
-    const files = fs.readdirSync('./public/images/original');
-    files.sort(function (x, y) {
-        return fs.statSync('./public/images/original/' + y).ctime.getTime() - fs.statSync('./public/images/original/' + x).ctime.getTime()
-    })
-
-    return files;
+    return fs.readdirSync('./public/images/original');
 }
 
 function importStatementBuilder(images) {
@@ -29,6 +26,7 @@ function imageExportListBuilder(images) {
         exportList += `        width: ${ image.width },\n`;
         exportList += `        height: ${ image.height },\n`;
         exportList += `        date: "${ image.date }",\n`;
+        exportList += `        readableDate: "${ image.readableDate }"\n`;
         exportList += `    },\n`;
     });
     exportList += "};\n";
@@ -45,36 +43,55 @@ function getReadableDate(date) {
         (mm > 9 ? '' : '0') + mm,
         (dd > 9 ? '' : '0') + dd
     ].join('/');
-};
+}
 
 export default async function imageImporter() {
     const image_names = await Promise.all(imageLister().map(
         async (image, index) => {
             const filename = `IMG_${ index + 1 }`;
+
             await sharp(`./public/images/original/${ image }`)
+                .withMetadata()
                 .rotate()
                 .resize({ width: 640, withoutEnlargement: true })
                 .jpeg({ quality: 80, mozjpeg: true, force: true })
                 .toFile(`./public/images/thumbnail/${ filename }.jpeg`);
 
-            /**
-             * Get width and height of image
-             */
-            const dimensions = await sharp(`./public/images/thumbnail/${ filename }.jpeg`).metadata();
-            console.log(dimensions.width, dimensions.height);
-            const date = new Date(fs.statSync(`./public/images/original/${ image }`).ctime);
+            const original_metadata = await sharp(`./public/images/original/${ image }`).metadata();
+            const original_size = fs.statSync(`./public/images/original/${ image }`).size;
+
+            const exifTags = await ExifReader.load(`./public/images/original/${ image }`);
+
+            let date;
+            if ("DateTimeOriginal" in exifTags) {
+                date = parse(exifTags['DateTimeOriginal'].description, 'YYYY:MM:DD HH:mm:ss');
+            } else {
+                date = fs.statSync(`./public/images/original/${ image }`).ctime;
+            }
+
+            const converted_metadata = await sharp(`./public/images/thumbnail/${ filename }.jpeg`).metadata();
+            const converted_size = fs.statSync(`./public/images/thumbnail/${ filename }.jpeg`).size;
+
+            console.log(
+                `${ filename }: ${ original_metadata.width } ✕ ${ original_metadata.height } [ ${ original_size / 1000 }KB ] => ${ converted_metadata.width } ✕ ${ converted_metadata.height } [ ${ converted_size / 1000 }KB ]`
+            );
 
             return {
                 name: filename,
                 thumbnailPath: `./images/thumbnail/${ filename }.jpeg`,
                 originalPath: `./images/original/${ image }`,
-                date: getReadableDate(date),
-                width: dimensions.width,
-                height: dimensions.height,
+                readableDate: getReadableDate(date),
+                date: date,
+                width: converted_metadata.width,
+                height: converted_metadata.height,
             };
         }
     ));
 
+    image_names.sort((a, b) => {
+        return new Date(b.date) - new Date(a.date);
+    });
+
     /**
      * Write all imports to the index.js file
      */

diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
     "@types/react-dom": "^17.0.17",
     "autoprefixer": "^10.4.7",
     "eslint": "^8.15.0",
+    "exifreader": "^4.5.0",
+    "fecha": "^4.2.3",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
     "sharp": "^0.30.7",

diff --git a/yarn.lock b/yarn.lock
@@ -1719,6 +1719,11 @@
   resolved "https://registry.yarnpkg.com/@web3-storage/multipart-parser/-/multipart-parser-1.0.0.tgz#6b69dc2a32a5b207ba43e556c25cc136a56659c4"
   integrity sha512-BEO6al7BYqcnfX15W2cnGR+Q566ACXAT9UQykORCWW80lmkpWsnEob6zJS1ZVBKsSJC8+7vJkHwlp+lXG1UCdw==
 
+"@xmldom/xmldom@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.5.tgz#09fa51e356d07d0be200642b0e4f91d8e6dd408d"
+  integrity sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A==
+
 "@yarnpkg/[email protected]":
   version "3.0.0-rc.11"
   resolved "https://registry.yarnpkg.com/@yarnpkg/esbuild-plugin-pnp/-/esbuild-plugin-pnp-3.0.0-rc.11.tgz#5cd829662b916a3dbbdc5a76913380f1913d2b65"
@@ -3402,6 +3407,13 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+exifreader@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/exifreader/-/exifreader-4.5.0.tgz#350545e2de9f20ca72c585c8adb11ad54349d16b"
+  integrity sha512-CUkDKjA+hNV6+bx5skPPdjeyPV28LZtqrd/7Sli1j2Y/QTZC7PQc+h2j5TeIo5zYbYhwzEN6chgeTdWLY33cUg==
+  optionalDependencies:
+    "@xmldom/xmldom" "^0.7.5"
+
 [email protected]:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-2.2.1.tgz#007b2d92c6428eda2b76e7016a34351586934593"
@@ -3545,6 +3557,11 @@ fault@^2.0.0:
   dependencies:
     format "^0.2.0"
 
+fecha@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd"
+  integrity sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==
+
 figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"