<!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;
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="file"],
select {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
}
button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: #fff;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#output {
margin-top: 20px;
}
#downloadLink {
display: block;
margin-top: 10px;
padding: 10px;
background-color: #28a745;
color: #fff;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
}
#downloadLink:hover {
background-color: #218838;
}
</style>
</head>
<body>
<div class="container">
<h1>Image Format Converter</h1>
<input type="file" id="imageUpload" accept="image/*">
<select id="formatSelect">
<option value="png">PNG</option>
<option value="jpg">JPG</option>
</select>
<button id="convertBtn">Convert</button>
<div id="output">
<a id="downloadLink" href="#" style="display:none;">Download Converted Image</a>
</div>
</div>
<canvas id="canvas" style="display:none;"></canvas>
<script>
document.getElementById('convertBtn').addEventListener('click', () => {
const fileInput = document.getElementById('imageUpload');
const formatSelect = document.getElementById('formatSelect');
const canvas = document.getElementById('canvas');
const downloadLink = document.getElementById('downloadLink');
if (fileInput.files.length === 0) {
alert('Please select an image file.');
return;
}
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
let convertedImage;
if (formatSelect.value === 'png') {
convertedImage = canvas.toDataURL('image/png');
downloadLink.download = 'converted-image.png';
} else if (formatSelect.value === 'jpg') {
convertedImage = canvas.toDataURL('image/jpeg');
downloadLink.download = 'converted-image.jpg';
}
downloadLink.href = convertedImage;
downloadLink.style.display = 'block';
}
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
Explanation
HTML Structure
DOCTYPE and HTML Tags
<!DOCTYPE html>: Specifies the document type and version of HTML (HTML5).<html lang="en">: Root element with the language attribute set to English.
Head Section
<head>: Contains meta-information about the document.<meta charset="UTF-8">: Sets the character encoding to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering on mobile devices by setting the viewport width to the device width.<title>Image Format Converter</title>: The title of the page displayed in the browser tab.<style>: Contains CSS styles to make the page look nice.
Body Section
<body>: Contains the content of the document..container: A div with class "container" that wraps all the main elements.<h1>: The main heading of the page.<input type="file" id="imageUpload" accept="image/*">: A file input to allow users to upload an image.<select id="formatSelect">: A dropdown menu to select the desired output format (PNG or JPG).<button id="convertBtn">Convert</button>: A button to trigger the conversion process.<div id="output">: A div to contain the download link once the image is converted.<a id="downloadLink" href="#" style="display:none;">Download Converted Image</a>: A hidden link that becomes visible when the conversion is done.<canvas id="canvas" style="display:none;"></canvas>: A hidden canvas element used for drawing the image.
CSS Styling
Body and Container Styles
body: Styles the body element to use Arial font, center the content, and set the background color..container: Styles the container with a white background, rounded corners, shadow effects, and padding.
Input, Select, Button, and Download Link Styles
input[type="file"], select: Styles the file input and select elements with margins, padding, borders, and width settings.button: Styles the convert button with padding, border-radius, background color, font settings, and hover effects.#downloadLink: Styles the download link to make it look like a button and adds hover effects.
JavaScript Functionality
- Script Section
- Adds an event listener to the convert button that triggers the conversion process when clicked.
File Input and Format Select Elements
- Retrieves the file input and format select elements.
- Checks if a file has been selected; if not, it alerts the user.
FileReader and Image Elements
- Creates a FileReader to read the uploaded image file.
- When the file is loaded, creates an Image object with the result.
Canvas Drawing
- Sets the canvas dimensions to match the uploaded image.
- Draws the image onto the canvas using
ctx.drawImage.
Conversion and Download Link
- Converts the image to the selected format (PNG or JPG) using
canvas.toDataURL. - Sets the download link's
hrefattribute to the converted image data. - Updates the download link's
downloadattribute with the appropriate file name. - Makes the download link visible for the user to download the converted image.
0 Comments