Switch jimp to sharp

next.config.js

@@ -35,9 +35,9 @@ const nextConfig = {
       .concat(createRemotePattern(HOSTNAME_AWS_S3)),
     minimumCacheTTL: 31536000,
   },
-  experimental: {
-    serverComponentsExternalPackages: ['jimp'],
-  },
+  // experimental: {
+  //   serverComponentsExternalPackages: ['jimp'],
+  // },
 };
 
 const withBundleAnalyzer = require('@next/bundle-analyzer')({

package.json

@@ -41,7 +41,6 @@
     "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",
@@ -52,6 +51,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-icons": "^5.1.0",
+    "sharp": "^0.33.3",
     "sonner": "^1.4.41",
     "swr": "^2.2.5",
     "tailwindcss": "3.4.3",

src/photo/server.ts

@@ -10,7 +10,7 @@ import {
 import { ExifData, ExifParserFactory } from 'ts-exif-parser';
 import { PhotoFormData } from './form';
 import { FilmSimulation } from '@/simulation';
-import Jimp from 'jimp';
+import sharp from 'sharp';
 
 export const extractExifDataFromBlobPath = async (
   blobPath: string,
@@ -69,10 +69,12 @@ export const extractExifDataFromBlobPath = async (
   };
 };
 
-export const blurImage = async (url: string) =>
-  Jimp.read(decodeURIComponent(url))
-    .then(image => {
-      image.resize(100, Jimp.AUTO);
-      image.blur(20);
-      return image.getBase64Async(Jimp.MIME_JPEG);
-    });
+export const blurImage = async (url: string) => {
+  const image = await fetch(decodeURIComponent(url))
+    .then(res => res.arrayBuffer());
+  return sharp(image)
+    .resize(200)
+    .blur(20)
+    .toBuffer()
+    .then(data => `data:image/png;base64,${data.toString('base64')}`);
+};