rezise image

src/Components/SkyIdentification.js

@@ -17,14 +17,13 @@ const SkyIdentification = () => {
     readImage(event.target.files[0]);
   };
 
-  const readImage = (file) => {
+  const readImage = async (file) => {
     const reader = new FileReader();
-    //setSelectedFile(file);
-    resizeImage(file);
+    const resizedImage = await helper.resizeImage(file);
+    setSelectedFile(resizedImage);
     reader.onload = function () {
       setImageSrc(reader.result);
   };
-    console.log(file)
     skyid_extract_info_from_doc_request(file, responseLogin.response_data.access_token);
   };
 
@@ -158,53 +157,6 @@ const SkyIdentification = () => {
     skyid.skyid_fa_setup_sdk();
   };
 
-  // rezise image function
-  const resizeImage = (file) => {
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const img = new Image();
-      img.src = e.target.result;
-      img.onload = () => {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-        
-        canvas.width = 1000;
-        canvas.height = 600;
-        if(img.width < img.height){
-          console.log("rezised")
-          canvas.width = 600;
-          canvas.height = 1000;
-        }
-
-        if(img.width > canvas.width || img.height > canvas.height){
-
-          console.log("Im here")
-          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-            canvas.toBlob(
-              (blob) => {
-                if (blob) {
-                  const resizedFile = new File([blob], file.name, {
-                    type: file.type,
-                    lastModified: Date.now(),
-                  });
-                  console.log('Resized File:', resizedFile);
-                  setSelectedFile(resizedFile);
-                } else {
-                  console.error('Failed to create Blob.');
-                }
-              },
-              file.type, // Set the image type explicitly
-              0.9 // Adjust the quality (0.0 to 1.0, 1.0 for maximum quality)
-            );
-        }
-      };
-    };
-  
-    reader.readAsDataURL(file);
-  };
-
-
   const setMessage = () => {
     skyid.message_variables.skyid_fa_sdk_access_error_message = "Votre token n'est pas valide";
     skyid.message_variables.skyid_fa_sdk_loading_error_message = "Error lors de chargement des modules";
@@ -232,6 +184,7 @@ const SkyIdentification = () => {
       <div id="multi-step-form-container">
 
         <input type="file" onChange={handleFileChange} />
+
         <img src={`${imageSrc}`} />
 
         <br/>

src/config/helperConfig.js

@@ -19,11 +19,13 @@ export default {
         const canvas_bin = this.skyid_fa_canvas2binary(my_selfie_canvas);
         return new File([canvas_bin], "skyid_fa_selected_frame.jpg", { type: "application/octet-stream" })
     },
+
     skyid_fa_canvas2binary(req_canvas) {
         let skyid_fa_canvas_data = req_canvas.toDataURL('image/jpeg', 1.0);
         skyid_fa_canvas_data = skyid_fa_canvas_data.replace('data:image/jpeg;base64,', '');
         return this.skyid_fa_base64ToArrayBuffer(skyid_fa_canvas_data)
     },
+
     skyid_fa_base64ToArrayBuffer(base64) {
         const binary_string = window.atob(base64);
         const len = binary_string.length;
@@ -32,8 +34,52 @@ export default {
             bytes[i] = binary_string.charCodeAt(i);
         }
         return bytes.buffer;
-    }
-  
+    },
+     resizeImage (file) {
+        console.log(file);
+        const defaultQualityRatio = 0.9;
+        const imageType = file.type || 'image/jpeg';
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+      
+          reader.readAsDataURL(file);
+      
+          reader.onload = (e) => {
+            const img = new Image();
+            img.src = e.target.result;
+      
+            img.onload = () => {
+              const canvas = document.createElement('canvas');
+              const ctx = canvas.getContext('2d');
+      
+              canvas.width = 1000;
+              canvas.height = 600;
+      
+              if (img.width < img.height) {
+                canvas.width = 600;
+                canvas.height = 1000;
+              }
+      
+              if (img.width > canvas.width || img.height > canvas.height) {
+                ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                ctx.canvas.toBlob(
+                  (blob) => {
+                    resolve(
+                      new File([blob], file.name, {
+                        type: imageType,
+                        lastModified: Date.now(),
+                      })
+                    );
+                  },
+                  imageType,
+                  defaultQualityRatio
+                );
+              }
+            };
+          };
+          reader.onerror = (error) => {reject(error);};
+        });
+      }
   }
     
   
\ No newline at end of file