Update index.html

index.html

@@ -13,9 +13,10 @@
 
     <form id="imageForm">
         <label for="imageInput">Select an Image:</label>
-        <input type="file" id="imageInput" accept="image/*" required onchange="detectImageFormat()">
+        <input type="file" id="imageInput" accept="image/*" required onchange="detectImageProperties()">
 
         <p id="formatInfo">Detected Format: <span id="formatDisplay"></span></p>
+        <p id="sizeInfo">Image Size: <span id="sizeDisplay"></span></p>
 
         <label for="targetFormat">Choose Target Format:</label>
         <select id="targetFormat" required>
@@ -32,11 +33,17 @@
             <option value="image/webp">WebP</option>
         </select>
 
-        <label for="quality">Quality (for JPEG and WebP):</label>
-        <input type="range" id="quality" min="1" max="100" step="1" value="85">
+        <label for="customWidth">Custom Width (leave empty for original):</label>
+        <input type="text" id="customWidth">
 
-        <label for="decreaseSize">Decrease Image Size:</label>
-        <input type="checkbox" id="decreaseSize">
+        <label for="customHeight">Custom Height (leave empty for original):</label>
+        <input type="text" id="customHeight">
+
+        <input type="checkbox" id="keepAspectRatio">
+        <label for="keepAspectRatio">Keep Aspect Ratio</label>
+
+        <input type="checkbox" id="compressImage">
+        <label for="compressImage">Compress Image</label>
 
         <button type="button" onclick="convertImage()">Convert</button>
 
@@ -44,21 +51,25 @@
     </form>
 
     <script>
-        function detectImageFormat() {
+        function detectImageProperties() {
             const input = document.getElementById('imageInput');
             const formatDisplay = document.getElementById('formatDisplay');
+            const sizeDisplay = document.getElementById('sizeDisplay');
 
             if (input.files.length > 0) {
                 const file = input.files[0];
                 formatDisplay.textContent = file.type;
+                sizeDisplay.textContent = `${file.size} bytes`;
             }
         }
 
         function convertImage() {
             const input = document.getElementById('imageInput');
             const targetFormat = document.getElementById('targetFormat').value;
-            const quality = document.getElementById('quality').value;
-            const decreaseSize = document.getElementById('decreaseSize').checked;
+            const customWidth = document.getElementById('customWidth').value;
+            const customHeight = document.getElementById('customHeight').value;
+            const keepAspectRatio = document.getElementById('keepAspectRatio').checked;
+            const compressImage = document.getElementById('compressImage').checked;
             const formatDisplay = document.getElementById('formatDisplay');
             const downloadLink = document.getElementById('downloadLink');
 
@@ -69,68 +80,43 @@
                 formatDisplay.textContent = file.type;
 
                 // Convert and create a download link
-                const blob = file.slice(0, file.size, targetFormat);
-                const url = URL.createObjectURL(blob);
-
-                if (decreaseSize) {
-                    // Decrease image size
-                    const img = new Image();
-                    img.onload = function () {
-                        const canvas = document.createElement('canvas');
-                        const ctx = canvas.getContext('2d');
+                const img = new Image();
+                img.onload = function () {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
 
-                        const maxWidth = 800;
-                        const maxHeight = 800;
+                    // Apply custom dimensions
+                    let newWidth, newHeight;
 
-                        let newWidth = img.width;
-                        let newHeight = img.height;
+                    if (customWidth && customHeight) {
+                        newWidth = parseInt(customWidth, 10);
+                        newHeight = parseInt(customHeight, 10);
 
-                        if (img.width > maxWidth) {
-                            newWidth = maxWidth;
-                            newHeight = (img.height * maxWidth) / img.width;
+                        if (keepAspectRatio) {
+                            // Calculate new height to maintain aspect ratio
+                            newHeight = (img.height * newWidth) / img.width;
                         }
+                    } else {
+                        // If custom dimensions are not provided, use original dimensions
+                        newWidth = img.width;
+                        newHeight = img.height;
+                    }
 
-                        if (img.height > maxHeight) {
-                            newHeight = maxHeight;
-                            newWidth = (img.width * maxHeight) / img.height;
-                        }
+                    canvas.width = newWidth;
+                    canvas.height = newHeight;
 
-                        canvas.width = newWidth;
-                        canvas.height = newHeight;
-                        ctx.drawImage(img, 0, 0, newWidth, newHeight);
-
-                        canvas.toBlob(function (smallBlob) {
-                            const smallUrl = URL.createObjectURL(smallBlob);
-                            downloadLink.href = smallUrl;
-                            downloadLink.style.display = 'block';
-                        }, targetFormat, quality);
-                    };
-
-                    img.src = url;
-                } else {
-                    if (targetFormat === 'image/jpeg' || targetFormat === 'image/webp') {
-                        // Apply quality setting for JPEG and WebP
-                        const img = new Image();
-                        img.onload = function () {
-                            const canvas = document.createElement('canvas');
-                            canvas.width = img.width;
-                            canvas.height = img.height;
-                            const ctx = canvas.getContext('2d');
-                            ctx.drawImage(img, 0, 0);
-                            canvas.toBlob(function (compressedBlob) {
-                                const compressedUrl = URL.createObjectURL(compressedBlob);
-                                downloadLink.href = compressedUrl;
-                                downloadLink.style.display = 'block';
-                            }, targetFormat, quality / 100);
-                        };
-
-                        img.src = url;
-                    } else {
-                        // For other formats, no quality setting
+                    // Draw the image on the canvas
+                    ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+                    // Convert and create a download link
+                    canvas.toBlob(function (blob) {
+                        const url = URL.createObjectURL(blob);
                         downloadLink.href = url;
                         downloadLink.style.display = 'block';
-                    }
-                }
+                    }, targetFormat, compressImage ? 0.85 : 1.0); // Adjust compression quality if needed
+                };
+
+                img.src = URL.createObjectURL(file);
             }
         }
     </script>