| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Image Format Converter</title> |
| <style> |
| body { |
| font-family: 'Arial', sans-serif; |
| max-width: 600px; |
| margin: 20px auto; |
| padding: 20px; |
| background-color: #f4f4f4; |
| border-radius: 10px; |
| text-align: center; |
| } |
| |
| h1 { |
| color: #333; |
| } |
| |
| form { |
| background-color: #fff; |
| padding: 20px; |
| border-radius: 8px; |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
| } |
| |
| label, select, button, input { |
| display: block; |
| margin: 10px auto; |
| } |
| |
| select, input { |
| width: 80%; |
| padding: 10px; |
| border: 1px solid #ccc; |
| border-radius: 4px; |
| } |
| |
| input[type="checkbox"] { |
| margin-right: 5px; |
| } |
| |
| button { |
| background-color: #4caf50; |
| color: #fff; |
| padding: 10px; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| transition: background-color 0.3s ease; |
| } |
| |
| button:hover { |
| background-color: #45a049; |
| } |
| |
| a { |
| color: #2196F3; |
| text-decoration: none; |
| display: block; |
| margin-top: 10px; |
| } |
| |
| a:hover { |
| text-decoration: underline; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Image Format Converter</h1> |
|
|
| <form id="imageForm"> |
| <label for="imageInput">Select an Image:</label> |
| <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="bmp">BMP</option> |
| <option value="eps">EPS</option> |
| <option value="gif">GIF</option> |
| <option value="ico">ICO</option> |
| <option value="jpeg">JPG</option> |
| <option value="png">PNG</option> |
| <option value="psd">PSD</option> |
| <option value="svg+xml">SVG</option> |
| <option value="tga">TGA</option> |
| <option value="tiff">TIFF</option> |
| <option value="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]; |
| |
| |
| formatDisplay.textContent = file.type; |
| |
| |
| const supportedFormats = ['bmp', 'eps', 'gif', 'ico', 'jpeg', 'png', 'psd', 'svg+xml', 'tga', 'tiff', 'webp']; |
| |
| if (!supportedFormats.includes(targetFormat)) { |
| alert('Unsupported target format. Please choose a supported format.'); |
| return; |
| } |
| |
| |
| const img = new Image(); |
| img.src = URL.createObjectURL(file); |
| |
| img.onload = function () { |
| const canvas = document.createElement('canvas'); |
| const ctx = canvas.getContext('2d'); |
| |
| |
| let newWidth, newHeight; |
| |
| if (customWidth && customHeight) { |
| newWidth = parseInt(customWidth, 10); |
| newHeight = parseInt(customHeight, 10); |
| |
| if (keepAspectRatio) { |
| |
| newHeight = (img.height * newWidth) / img.width; |
| } |
| } else { |
| |
| newWidth = img.width; |
| newHeight = img.height; |
| } |
| |
| canvas.width = newWidth; |
| canvas.height = newHeight; |
| |
| |
| ctx.drawImage(img, 0, 0, newWidth, newHeight); |
| |
| |
| canvas.toBlob(function (blob) { |
| const url = URL.createObjectURL(blob); |
| downloadLink.href = url; |
| downloadLink.style.display = 'block'; |
| }, `image/${targetFormat}`, compressImage ? 0.85 : 1.0); |
| }; |
| } |
| } |
| </script> |
| </body> |
| </html> |
|
|
