front: convert base64 encoded map image to jpeg

OpenRailAssociation · Oct 1, 2024 · f8f0ff7 · f8f0ff7
1 parent a5e9ca2
commit f8f0ff7
Show file tree

Hide file tree

Showing 2 changed files with 51 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,17 @@ const SimulationReportSheet = ({
     path_number2: 'n°YYYYYY',
   };
 
+  const [mapBlob, setMapBlob] = useState<Blob | null>(null);
+
+  // Convert image to JPEG
+  useEffect(() => {
+    if (mapCanvas) {
+      base64ToJpeg(mapCanvas, 0.8).then((blob) => {
+        setMapBlob(blob);
+      });
+    }
+  }, [mapCanvas]);
+
   return (
     <Document>
       <Page wrap={false} style={styles.main.page} size={[1344]}>
@@ -345,7 +358,7 @@ const SimulationReportSheet = ({
         </View>
         {mapCanvas && (
           <View style={styles.map.map} id="simulationMap">
-            <Image src={mapCanvas} />
+            {mapBlob && <Image src={URL.createObjectURL(mapBlob)} />}
           </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 = async (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);
+    };
+  });