front: convert base64 encoded map image to jpeg

Signed-off-by: Theo Macron <theo.macron0315@gmail.com>
OpenRailAssociation · Oct 2, 2024 · fee1462 · fee1462
1 parent a5e9ca2
commit fee1462
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 2 deletions.
diff --git a/front/src/applications/stdcm/components/SimulationReportSheet.tsx b/front/src/applications/stdcm/components/SimulationReportSheet.tsx
@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import { Table, TR, TH, TD } from '@ag-media/react-pdf-table';
 import { Page, Text, Image, Document, View, Link } from '@react-pdf/renderer';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +11,7 @@ import { capitalizeFirstLetter } from 'utils/strings';
 
 import styles from './SimulationReportStyleSheet';
 import type { SimulationReportSheetProps } from '../types';
-import { getStopDurationTime } from '../utils/formatSimulationReportSheet';
+import { base64ToJpeg, getStopDurationTime } from '../utils/formatSimulationReportSheet';
 
 const SimulationReportSheet = ({
   stdcmData,
@@ -32,6 +34,33 @@ const SimulationReportSheet = ({
     path_number2: 'n°YYYYYY',
   };
 
+  const [mapImageUrl, setMapImageUrl] = useState<string | null>(null);
+
+  // Convert image to JPEG
+  useEffect(() => {
+    let objectUrl: string | null = null;
+
+    if (mapCanvas) {
+      base64ToJpeg(mapCanvas, 0.8).then((blob) => {
+        if (blob) {
+          // Revoke the previous object URL if it exists
+          if (objectUrl) {
+            URL.revokeObjectURL(objectUrl);
+          }
+          objectUrl = URL.createObjectURL(blob);
+          setMapImageUrl(objectUrl);
+        }
+      });
+    }
+
+    // Cleanup the object URL when the component is unmounted or before a new one is created
+    return () => {
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [mapCanvas]);
+
   return (
     <Document>
       <Page wrap={false} style={styles.main.page} size={[1344]}>
@@ -345,7 +374,7 @@ const SimulationReportSheet = ({
         </View>
         {mapCanvas && (
           <View style={styles.map.map} id="simulationMap">
-            <Image src={mapCanvas} />
+            {mapImageUrl && <Image src={mapImageUrl} />}
           </View>
         )}
         <View style={styles.footer.warrantyBox}>

diff --git a/front/src/applications/stdcm/utils/formatSimulationReportSheet.ts b/front/src/applications/stdcm/utils/formatSimulationReportSheet.ts
@@ -142,3 +142,39 @@ export function getOperationalPointsWithTimes(
 
   return opResults;
 }
+
+/**
+ * Converts a base64 image into a JPEG blob while reducing quality.
+ * @param base64Image - Image in base64
+ * @param quality - Image quality (between 0 and 1, where 1 is the best quality)
+ * @returns {Promise<Blob | null>} - Return an optimised JPEG Blob
+ */
+export const base64ToJpeg = (base64Image: string, quality: number): Promise<Blob | null> =>
+  new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = base64Image;
+    img.onload = () => {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        reject(new Error('Could not get canvas context'));
+        return;
+      }
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      ctx.drawImage(img, 0, 0);
+
+      canvas.toBlob(
+        (blob) => {
+          resolve(blob);
+        },
+        'image/jpeg',
+        quality
+      );
+    };
+
+    img.onerror = (error) => {
+      reject(error);
+    };
+  });