Add Jimp-based blur proof-of-concept

package.json

@@ -41,6 +41,7 @@
     "framer-motion": "^11.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jimp": "^0.22.12",
     "nanoid": "^5.0.7",
     "next": "^14.2.3",
     "next-auth": "5.0.0-beta.15",

src/app/admin/uploads/[uploadPath]/page.tsx

@@ -1,5 +1,5 @@
 import { PATH_ADMIN } from '@/site/paths';
-import { extractExifDataFromBlobPath } from '@/photo/server';
+import { blurImage, extractExifDataFromBlobPath } from '@/photo/server';
 import { redirect } from 'next/navigation';
 import { getUniqueTagsCached } from '@/photo/cache';
 import UploadPageClient from '@/photo/UploadPageClient';
@@ -18,6 +18,8 @@ export default async function UploadPage({ params: { uploadPath } }: Params) {
     photoFormExif,
   } = await extractExifDataFromBlobPath(uploadPath, true);
 
+  const blurBase64 = await blurImage(uploadPath);
+
   if (!photoFormExif) { redirect(PATH_ADMIN); }
 
   const uniqueTags = await getUniqueTagsCached();
@@ -27,12 +29,18 @@ export default async function UploadPage({ params: { uploadPath } }: Params) {
   const textFieldsToAutoGenerate = AI_TEXT_AUTO_GENERATED_FIELDS;
 
   return (
-    <UploadPageClient {...{
-      blobId,
-      photoFormExif,
-      uniqueTags,
-      hasAiTextGeneration,
-      textFieldsToAutoGenerate,
-    }} />
+    <>
+      <img
+        alt="Blur Debug"
+        src={blurBase64}
+      />
+      <UploadPageClient {...{
+        blobId,
+        photoFormExif,
+        uniqueTags,
+        hasAiTextGeneration,
+        textFieldsToAutoGenerate,
+      }} />
+    </>
   );
 };

src/photo/server.ts

@@ -10,6 +10,7 @@ import {
 import { ExifData, ExifParserFactory } from 'ts-exif-parser';
 import { PhotoFormData } from './form';
 import { FilmSimulation } from '@/simulation';
+import Jimp from 'jimp';
 
 export const extractExifDataFromBlobPath = async (
   blobPath: string,
@@ -67,3 +68,11 @@ export const extractExifDataFromBlobPath = async (
     },
   };
 };
+
+export const blurImage = async (url: string) =>
+  Jimp.read(decodeURIComponent(url))
+    .then(image => {
+      image.resize(300, Jimp.AUTO);
+      image.blur(30);
+      return image.getBase64Async(Jimp.MIME_JPEG);
+    });