resize image

src/Components/SkyIdentification.js

@@ -15,10 +15,11 @@ const SkyIdentification = () => {
     readImage(event.target.files[0]);
   };
 
-  const readImage = (file) => {
+  const readImage = async (file) => {
     const reader = new FileReader();
     reader.readAsDataURL(file);
-    setSelectedFile(file);
+    const resizedImage = await helper.resizeImage(file);
+    setSelectedFile(resizedImage);
     reader.onload = function () {
       setImageSrc(reader.result);
   };
@@ -78,14 +79,14 @@ const SkyIdentification = () => {
       }
     })
       .then(response => {
-        console.log('ocr success', response.data);
+        console.log('success', response.data);
         if (response.data.status_code === "000") {
           setResponseLiveness(response.data);
           skyid.skyid_fa_start_face_scan(skyid_face_scan_end_callbackfacematching, processFaTimeOut);
         }
       })
       .catch(error => {
-        console.error('ocr error', error);
+        console.error('error', error);
         window.location.reload()
       });
   };
@@ -106,14 +107,14 @@ const SkyIdentification = () => {
       }
     })
       .then(response => {
-        console.log('ocr success', response.data);
+        console.log('success', response.data);
         if (response.data.status_code === "000") {
           setResponseFaceMatching(response.data);
           skyid.skyid_fa_stop_webcam();
         }
       })
       .catch(error => {
-        console.error('ocr error', error);
+        console.error('error', error);
         skyid.skyid_fa_stop_webcam();
         window.location.reload()
       });

src/config/helperConfig.js

@@ -29,6 +29,51 @@ 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);};
+        });
     }
   
   }