/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 600px;
text-align: center;
}
h1 {
color: #333333;
}
.converter {
margin: 20px 0;
}
input[type="file"] {
margin: 10px 0;
}
select {
padding: 10px;
margin: 10px 0;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 16px;
}
button {
background-color: #007bff;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.output {
margin-top: 20px;
}
h2 {
color: #333333;
}
canvas {
border: 1px solid #dddddd;
border-radius: 5px;
margin-top: 10px;
}
#download-link {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: #28a745;
color: #ffffff;
text-decoration: none;
border-radius: 5px;
}
#download-link:hover {
background-color: #218838;
}
// script.js
document.getElementById('convert-button').addEventListener('click', convertImage);
function convertImage() {
const input = document.getElementById('image-input').files[0];
const format = document.getElementById('format-select').value;
if (!input) {
alert('Please select an image file.');
return;
}
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const canvas = document.getElementById('output-canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
let convertedImage;
if (format === 'png') {
convertedImage = canvas.toDataURL('image/png');
} else {
convertedImage = canvas.toDataURL('image/jpeg');
}
document.getElementById('download-link').href = convertedImage;
document.getElementById('download-link').download = `converted-image.${format}`;
}
img.src = event.target.result;
}
reader.readAsDataURL(input);
}
No comments:
Post a Comment