File size: 2,492 Bytes
782bb59 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 |
<!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>
</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>
<p id="formatInfo">Detected Format: <span id="formatDisplay"></span></p>
<label for="targetFormat">Choose Target Format:</label>
<select id="targetFormat" required>
<option value="image/jpeg">JPEG</option>
<option value="image/png">PNG</option>
<!-- Add more format options as needed -->
</select>
<button type="button" onclick="convertImage()">Convert</button>
<a id="downloadLink" style="display: none" download="converted_image">Download Converted Image</a>
</form>
<script>
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 reader = new FileReader();
reader.onload = function (e) {
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 (blob) {
const url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.style.display = 'block';
}, targetFormat);
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>
|