WebP to JPEG Converter
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(45deg, #ff6ec7, #ff9a8b);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: #fff;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
h1 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
color: #333;
}
.upload-section {
margin-bottom: 1rem;
}
.upload-button {
background-color: #ff6ec7;
color: white;
padding: 10px 20px;
font-size: 1rem;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.upload-button:hover {
background-color: #ff9a8b;
}
#file-upload {
display: none;
}
.preview-container {
margin: 1rem 0;
display: none;
}
#preview-img {
width: 100%;
border-radius: 8px;
max-height: 300px;
object-fit: contain;
}
.convert-button {
background-color: #4caf50;
color: white;
padding: 12px 24px;
font-size: 1.2rem;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
.convert-button:hover {
background-color: #45a049;
}
.output-container {
margin-top: 2rem;
}
button {
transition: all 0.3s ease;
}
@media (max-width: 600px) {
.container {
padding: 1.5rem;
}
h1 {
font-size: 1.5rem;
}
}
function previewImage(event) {
const file = event.target.files[0];
if (file && file.type === "image/webp") {
const reader = new FileReader();
reader.onload = function(e) {
const img = document.getElementById('preview-img');
img.src = e.target.result;
document.getElementById('image-preview').style.display = 'block';
};
reader.readAsDataURL(file);
} else {
alert("Please select a WebP image.");
}
}
function convertToJpeg() {
const file = document.getElementById('file-upload').files[0];
if (!file) {
alert("Please upload a WebP image first.");
return;
}
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const jpegDataUrl = canvas.toDataURL('image/jpeg');
const output = document.getElementById('output');
const a = document.createElement('a');
a.href = jpegDataUrl;
a.download = "converted-image.jpg";
a.textContent = "Download JPEG Image";
output.innerHTML = "";
output.appendChild(a);
};
const reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
