File size: 2,733 Bytes
782bb59 c91e80e 9fd3768 6be31bc 9fd3768 c91e80e 6be31bc c91e80e 9fd3768 c91e80e 9fd3768 c91e80e 6be31bc c91e80e 4a0bd66 c91e80e 782bb59 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!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>
/* ... (unchanged styles) */
</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="detectImageFormat()">
<p id="formatInfo">Detected Format: <span id="formatDisplay"></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/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/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>
<button type="button" onclick="convertImage()">Convert</button>
<a id="downloadLink" style="display: none" download="converted_image">Download Converted Image</a>
</form>
<script>
function detectImageFormat() {
const input = document.getElementById('imageInput');
const formatDisplay = document.getElementById('formatDisplay');
if (input.files.length > 0) {
const file = input.files[0];
formatDisplay.textContent = file.type;
}
}
function convertImage() {
const input = document.getElementById('imageInput');
const targetFormat = document.getElementById('targetFormat').value;
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 blob = file.slice(0, file.size, targetFormat);
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.style.display = 'block';
}
}
</script>
</body>
</html>
|