JPG to PNG Converter
/* General Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
color: #333;
margin-bottom: 20px;
font-size: 24px;
}
input[type="file"] {
margin-bottom: 20px;
}
button {
background-color: #4caf50;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
button:disabled {
background-color: #aaa;
cursor: not-allowed;
}
button:hover {
background-color: #45a049;
}
a {
text-decoration: none;
}
a button {
background-color: #008CBA;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
a button:hover {
background-color: #007bb5;
}
// Selecting necessary DOM elements
const fileInput = document.getElementById('fileInput');
const convertBtn = document.getElementById('convertBtn');
const downloadBtn = document.getElementById('downloadBtn');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Event listener for file input
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file && file.type === 'image/jpeg') {
convertBtn.disabled = false;
} else {
alert('Please upload a valid JPG file');
convertBtn.disabled = true;
}
});
// Convert the uploaded JPG image to PNG
convertBtn.addEventListener('click', () => {
const file = fileInput.files[0];
const img = new Image();
const reader = new FileReader();
reader.onload = function(event) {
img.src = event.target.result;
};
reader.readAsDataURL(file);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
// Create a PNG image from the canvas content
const pngUrl = canvas.toDataURL('image/png');
// Enable the download button with the converted image
downloadBtn.style.display = 'inline-block';
downloadBtn.href = pngUrl;
};
});
