Update index.html

index.html

@@ -73,4 +73,117 @@
 
     <form id="imageForm">
         <label for="imageInput">Select an Image:</label>
-        <input type="file" id="imageInput" accept="image/*"
+        <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>
+            <option value="image/bmp">BMP</option>
+            <option value="image/eps">EPS</option>
+            <option value="image/gif">GIF</option>
+            <option value="image/ico">ICO</option>
+            <option value="image/jpeg">JPG</option>
+            <option value="image/png">PNG</option>
+            <option value="image/psd">PSD</option>
+            <option value="image/svg+xml">SVG</option>
+            <option value="image/tga">TGA</option>
+            <option value="image/tiff">TIFF</option>
+            <option value="image/webp">WebP</option>
+        </select>
+
+        <label for="customWidth">Custom Width (leave empty for original):</label>
+        <input type="text" id="customWidth">
+
+        <label for="customHeight">Custom Height (leave empty for original):</label>
+        <input type="text" id="customHeight">
+
+        <input type="checkbox" id="keepAspectRatio" checked>
+        <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>
+
+        <a id="downloadLink" style="display: none" download="converted_image">Download Converted Image</a>
+    </form>
+
+    <script>
+        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];
+                const img = new Image();
+                img.src = URL.createObjectURL(file);
+
+                img.onload = function () {
+                    formatDisplay.textContent = file.type;
+                    sizeDisplay.textContent = `${img.width} x ${img.height} pixels`;
+                };
+            }
+        }
+
+        function convertImage() {
+            const input = document.getElementById('imageInput');
+            const targetFormat = document.getElementById('targetFormat').value;
+            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');
+
+            if (input.files.length > 0) {
+                const file = input.files[0];
+
+                // Display detected format
+                formatDisplay.textContent = file.type;
+
+                // Convert and create a download link
+                const img = new Image();
+                img.src = URL.createObjectURL(file);
+
+                img.onload = function () {
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+
+                    // Apply custom dimensions
+                    let newWidth, newHeight;
+
+                    if (customWidth && customHeight) {
+                        newWidth = parseInt(customWidth, 10);
+                        newHeight = parseInt(customHeight, 10);
+
+                        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;
+                    }
+
+                    canvas.width = newWidth;
+                    canvas.height = newHeight;
+
+                    // 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
+                };
+            }
+        }
+    </script>
+</body>
+</html>