PNG to JPG Converter
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
p {
font-size: 1.1rem;
color: #666;
}
.upload-section {
margin-bottom: 20px;
}
input[type="file"] {
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
margin-top: 10px;
transition: background-color 0.3s ease;
}
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
button:hover:enabled {
background-color: #218838;
}
.result-section {
margin-top: 20px;
}
.download-btn {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 5px;
text-decoration: none;
}
.download-btn:hover {
background-color: #c0392b;
}
function convertToJPG() {
const fileInput = document.getElementById("upload-image");
const file = fileInput.files[0];
if (!file) {
alert("Please upload a PNG image.");
return;
}
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Set canvas size to image size
canvas.width = img.width;
canvas.height = img.height;
// Draw image on canvas
ctx.drawImage(img, 0, 0);
// Convert canvas content to JPG data URL
const jpgDataUrl = canvas.toDataURL("image/jpeg");
// Enable download button
const downloadBtn = document.getElementById("download-btn");
downloadBtn.href = jpgDataUrl;
// Show result section
document.getElementById("result-section").style.display = "block";
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
// Enable the download button
document.getElementById("convert-btn").disabled = false;
}
