Webp to JPEG
Below is a complete responsive code for a WebP to JPEG conversion tool using HTML, CSS, and JavaScript. This tool allows users to upload a WebP image, convert it to JPEG, and download the converted image.
```html
WebP to JPEG Converter
```
```css
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
color: #333;
}
input[type="file"] {
margin-bottom: 20px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
a {
display: block;
margin-top: 20px;
color: #333;
text-decoration: none;
}
```
```javascript
// script.js
document.getElementById('convertBtn').addEventListener('click', convertToJPEG);
function convertToJPEG() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (file) {
const canvas = document.getElementById('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 convertedImageData = canvas.toDataURL('image/jpeg');
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = convertedImageData;
downloadLink.style.display = 'block';
}
img.src = URL.createObjectURL(file);
canvas.style.display = 'block';
} else {
alert('Please select a file.');
}
}
```
This code provides a simple yet effective tool for converting WebP images to JPEG format. It utilizes HTML5 Canvas to perform the conversion on the client-side and allows users to download the converted image directly. The styling is kept minimal but attractive using CSS.
.jpg)
.jpg){kind=icon}
.jpg)
No comments