WebP to JPEG Converter
WebP to JPEG Converter
Upload your WebP images to convert them to JPEG format.
/* Style for the WebP to JPEG converter tool */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #6a11cb, #2575fc);
color: #fff;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
text-align: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 2rem;
margin-bottom: 10px;
}
p {
font-size: 1rem;
margin-bottom: 20px;
}
.file-upload-area {
margin: 20px 0;
}
button {
padding: 10px 20px;
font-size: 1rem;
background: #ff7eb3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #ff477e;
}
.output-area {
margin-top: 20px;
}
.output-area img {
max-width: 100%;
margin: 10px 0;
}
output-area a {
display: block;
color: #00e6ff;
margin-top: 5px;
}
// Register FilePond
const fileInput = document.getElementById('fileInput');
FilePond.create(fileInput);
const convertBtn = document.getElementById('convertBtn');
const outputArea = document.getElementById('outputArea');
convertBtn.addEventListener('click', () => {
const files = fileInput.files;
if (!files.length) {
alert('Please upload at least one WebP file.');
return;
}
Array.from(files).forEach((file) => {
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image();
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);
const jpegData = canvas.toDataURL('image/jpeg');
const link = document.createElement('a');
link.href = jpegData;
link.download = file.name.replace('.webp', '.jpg');
link.textContent = `Download ${file.name.replace('.webp', '.jpg')}`;
const outputImg = document.createElement('img');
outputImg.src = jpegData;
outputArea.appendChild(outputImg);
outputArea.appendChild(link);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
});
