Update index.html

index.html

@@ -300,22 +300,11 @@ label[for="simple"], label[for="complex"] {
   <button id="downloadButton" style="display: block ;" onclick="downloadResultImage()">Download </button>
 
     <script>
-        function previewImage(event) {
-    const file = event.target.files[0];
-    const imagePreview = document.getElementById('sourceImageContainer');
-    const uploadButton = document.querySelector('button');
-
-    // Check if file size is larger than 500 MB (500 * 1024 * 1024 bytes)
-    if (file.size > 4000 * 1024) {
-        imagePreview.innerHTML = `<p style="color: white;">Please upload an image smaller than 4000 KB.</p>`;
-        uploadButton.disabled = true; // Disable the button
-        return;
-    }
-    
-    // If file size is within limit, enable the button and display image preview
-    imagePreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Uploaded Image" style="max-width: 300px; max-height: 300px;">`;
-    uploadButton.disabled = false; // Enable the button
-}
+       function previewImage(event) {
+            const file = event.target.files[0];
+            const imagePreview = document.getElementById('sourceImageContainer');
+            imagePreview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="Uploaded Image" style="max-width: 300px; max-height: 300px;">`;
+        }
 
         async function uploadFile() {
             const sourceFileInput = document.getElementById('sourceFile');
@@ -329,9 +318,11 @@ label[for="simple"], label[for="complex"] {
 
             // Clear the result container
             resultContainer.innerHTML = "";
-
+    // Compress the image to 500 KB before sending
+    const compressedFile = await compressImage(sourceFile.files[0]);
+    
             const formData = new FormData();
-            formData.append('file', sourceFileInput.files[0]);
+            formData.append('file', compressedFile);
             formData.append('version', document.querySelector('input[name="version"]:checked').value);
 
             try {
@@ -368,7 +359,53 @@ label[for="simple"], label[for="complex"] {
         const generateButton = document.querySelector('button');
         generateButton.addEventListener('click', uploadFile);
 
+async function compressImage(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = function(event) {
+            const img = new Image();
+            img.src = event.target.result;
+
+            img.onload = function() {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+
+                // Calculate the new dimensions to resize the image while maintaining aspect ratio
+                const maxWidth = 1000;
+                const maxHeight = 1000;
+                let width = img.width;
+                let height = img.height;
+
+                if (width > height) {
+                    if (width > maxWidth) {
+                        height *= maxWidth / width;
+                        width = maxWidth;
+                    }
+                } else {
+                    if (height > maxHeight) {
+                        width *= maxHeight / height;
+                        height = maxHeight;
+                    }
+                }
 
+                // Set the canvas dimensions
+                canvas.width = width;
+                canvas.height = height;
+
+                // Draw the image on the canvas with the new dimensions
+                ctx.drawImage(img, 0, 0, width, height);
+
+                // Convert canvas content to a blob
+                canvas.toBlob((blob) => {
+                    resolve(blob);
+                }, 'image/jpeg', 1); // Adjust quality as needed (0.7 is 70% quality)
+            }
+        }
+
+        // Read the file as data URL
+        reader.readAsDataURL(file);
+    });
+}
       function downloadResultImage() {
     const resultImage = document.getElementById('resultContainer').querySelector('img');
     const link = document.createElement('a');