Update index.html

index.html

@@ -21,18 +21,23 @@
         <select id="targetFormat" required>
             <option value="image/bmp">BMP</option>
             <option value="image/eps">EPS</option>
-            <option value="image/exr">HDR/EXR</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/vnd.wap.wbmp">WBMP</option>
             <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="decreaseSize">Decrease Image Size:</label>
+        <input type="checkbox" id="decreaseSize">
+
         <button type="button" onclick="convertImage()">Convert</button>
 
         <a id="downloadLink" style="display: none" download="converted_image">Download Converted Image</a>
@@ -52,6 +57,8 @@
         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 formatDisplay = document.getElementById('formatDisplay');
             const downloadLink = document.getElementById('downloadLink');
 
@@ -64,8 +71,46 @@
                 // Convert and create a download link
                 const blob = file.slice(0, file.size, targetFormat);
                 const url = URL.createObjectURL(blob);
-                downloadLink.href = url;
-                downloadLink.style.display = 'block';
+
+                if (decreaseSize) {
+                    // Decrease image size
+                    const img = new Image();
+                    img.onload = function () {
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+
+                        const maxWidth = 800; // You can adjust the maximum width as needed
+                        const maxHeight = 800; // You can adjust the maximum height as needed
+
+                        let newWidth = img.width;
+                        let newHeight = img.height;
+
+                        if (img.width > maxWidth) {
+                            newWidth = maxWidth;
+                            newHeight = (img.height * maxWidth) / img.width;
+                        }
+
+                        if (img.height > maxHeight) {
+                            newHeight = maxHeight;
+                            newWidth = (img.width * maxHeight) / img.height;
+                        }
+
+                        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);
+                    };
+
+                    img.src = url;
+                } else {
+                    downloadLink.href = url;
+                    downloadLink.style.display = 'block';
+                }
             }
         }
     </script>