PNG to JPG Converter
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background: linear-gradient(to bottom right, #ff7e5f, #feb47b);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
color: #fff;
margin-bottom: 20px;
}
input[type="file"] {
display: block;
margin: 10px auto;
padding: 10px;
border: 2px solid #fff;
border-radius: 5px;
background-color: #fff;
}
button {
background-color: #4caf50;
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
a#download {
display: inline-block;
background-color: #008cba;
color: white;
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 5px;
text-decoration: none;
}
document.getElementById('upload').addEventListener('change', handleFileSelect);
document.getElementById('convert').addEventListener('click', convertToJPG);
let uploadedFile;
function handleFileSelect(event) {
const file = event.target.files[0];
if (file && file.type === 'image/png') {
uploadedFile = file;
document.getElementById('convert').disabled = false;
} else {
alert('Please upload a valid PNG file.');
document.getElementById('convert').disabled = true;
}
}
function convertToJPG() {
if (!uploadedFile) return;
const img = new Image();
img.src = URL.createObjectURL(uploadedFile);
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(function(blob) {
const downloadLink = document.getElementById('download');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'converted.jpg';
downloadLink.style.display = 'inline-block';
saveAs(blob, 'converted.jpg');
}, 'image/jpeg');
};
Comments
Post a Comment