front: convert base64 encoded map image to jpeg

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,28 @@ const SimulationReportSheet = ({
     path_number2: 'n°YYYYYY',
   };
 
+  const [mapImageUrl, setMapImageUrl] = useState<string | null>(null);
+
+  // Convert image to JPEG
+  useEffect(() => {
+    if (mapCanvas) {
+      base64ToJpeg(mapCanvas, 0.8).then((blob) => {
+        const objectUrl = URL.createObjectURL(blob);
+        setMapImageUrl(objectUrl);
+      });
+    }
+  }, [mapCanvas]);
+
+  // Cleanup the object URL when the component is unmounted or before a new one is created
+  useEffect(
+    () => () => {
+      if (mapImageUrl) {
+        URL.revokeObjectURL(mapImageUrl);
+      }
+    },
+    [mapImageUrl]
+  );
+
   return (
     <Document>
       <Page wrap={false} style={styles.main.page} size={[1344]}>
@@ -345,7 +369,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}>

front/src/applications/stdcm/utils/formatSimulationReportSheet.ts

@@ -142,3 +142,41 @@ 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>} - Return an optimised JPEG Blob
+ */
+export const base64ToJpeg = (base64Image: string, quality: number): Promise<Blob> =>
+  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) => {
+          if (blob) {
+            resolve(blob);
+          }
+        },
+        'image/jpeg',
+        quality
+      );
+    };
+
+    img.onerror = (error) => {
+      reject(error);
+    };
+  });