WebP to JPEG Converter
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #f5a623, #f27474);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
padding: 20px 30px;
width: 90%;
max-width: 500px;
text-align: center;
}
.title {
font-size: 2em;
margin: 0 0 10px;
color: #333;
}
.subtitle {
font-size: 1em;
color: #666;
margin-bottom: 20px;
}
#fileInput {
margin-bottom: 20px;
}
.btn {
background: #f27474;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
.btn:hover {
background: #f5a623;
}
.output {
margin-top: 20px;
text-align: left;
}
.output img {
max-width: 100%;
margin-top: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
// Initialize FilePond for file input
const inputElement = document.querySelector('#fileInput');
const pond = FilePond.create(inputElement);
// Configure FilePond
FilePond.setOptions({
labelIdle: 'Drag & Drop your WebP files or
Browse',
acceptedFileTypes: ['image/webp'],
});
// Button and Output Elements
const convertButton = document.getElementById('convertButton');
const output = document.getElementById('output');
// Function to convert WebP to JPEG
convertButton.addEventListener('click', async () => {
const files = pond.getFiles();
if (files.length === 0) {
alert('Please upload at least one WebP file.');
return;
}
output.innerHTML = ''; // Clear previous output
for (const file of files) {
const fileBlob = file.file;
const fileName = file.filename.replace('.webp', '.jpeg');
// Convert WebP to JPEG using a Canvas
const img = new Image();
img.src = URL.createObjectURL(fileBlob);
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
canvas.toBlob(
(blob) => {
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = fileName;
downloadLink.textContent = `Download ${fileName}`;
downloadLink.classList.add('download-link');
// Append output
output.appendChild(downloadLink);
output.appendChild(document.createElement('br'));
},
'image/jpeg',
1.0
);
};
}
});
