Merge pull request #7 from hoichoi-opensource/aspectratio

Aspectratio
hoichoi-opensource · Sep 21, 2023 · d48e882 · d48e882
2 parents 65f7b0e + e631aa5
commit d48e882
Showing 1 changed file with 24 additions and 9 deletions.
diff --git a/server.js b/server.js
@@ -42,18 +42,30 @@ app.post("/upload", upload.single("image"), async (req, res) => {
       resizeOptions.height = dimension.height;
     }
 
-    const resizedBuffer = await sharp(originalImage)
+    const resizedBufferWebp = await sharp(originalImage)
+      .webp()
       .resize({
         width: resizeOptions.width,
         height: resizeOptions.height,
         fit: "inside",
       })
       .toBuffer();
 
-    const size = (resizedBuffer.length / 1024).toFixed(2); // size in KB
+    const resizedBufferAvif = await sharp(originalImage)
+      .avif()
+      .resize({
+        width: resizeOptions.width,
+        height: resizeOptions.height,
+        fit: "inside",
+      })
+      .toBuffer();
+
+    const sizeWebP = (resizedBufferWebp.length / 1024).toFixed(2); // size in KB
+    const sizeAvif = (resizedBufferAvif.length / 1024).toFixed(2); // size in KB
     resizedImages.push({
-      buffer: resizedBuffer,
-      size,
+      buffer: [resizedBufferWebp, resizedBufferAvif],
+      sizeWebP,
+      sizeAvif,
       dimension: resizeOptions,
     });
   }
@@ -64,12 +76,15 @@ app.post("/upload", upload.single("image"), async (req, res) => {
           .map(
             (img) => `
             <div>
-                <h3>${img.dimension.width}x${img.dimension.height} - ${
-              img.size
-            } KB</h3>
-                <img src="data:image/png;base64,${img.buffer.toString(
+                <h3>${img.dimension.width}x${img.dimension.height} - WEBP ${
+              img.sizeWebP
+            } KB AVIF ${img.sizeAvif}</h3>
+                <img src="data:image/webp;base64,${img.buffer[0].toString(
+                  "base64"
+                )}" alt="Resized Image WebP">
+                <img src="data:image/avif;base64,${img.buffer[1].toString(
                   "base64"
-                )}" alt="Resized Image">
+                )}" alt="Resized Image Avif">
             </div>
         `
           )