body {
font-family: Arial, sans-serif;
text-align: center;
}
#conversion-form {
margin: 30px auto;
text-align: center;
}
#jpg-file {
margin-right: 10px;
}
#convert-button {
background-color: green;
color: white;
padding: 10px 20px;
}
#result {
margin-top: 30px;
}
const form = document.getElementById('conversion-form');
const jpgFileInput = document.getElementById('jpg-file');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
const jpgFile = jpgFileInput.files[0];
if (!jpgFile) {
alert('Please select a JPG file to convert.');
return;
}
const reader = new FileReader();
reader.onload = () => {
const jpgData = reader.result;
const img = new Image();
img.src = jpgData;
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 pngData = canvas.toDataURL('image/png');
const pngFile = new File([pngData], 'converted.png', { type: 'image/png' });
result.innerHTML = `Download PNG`;
};
};
reader.readAsDataURL(jpgFile);
});