JPG to PNG Converter
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.container {
text-align: center;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
}
h1 {
color: #ff7e5f;
}
.upload-section {
margin: 20px 0;
}
input[type="file"] {
border: 1px solid #ff7e5f;
padding: 10px;
border-radius: 5px;
background-color: #ff7e5f;
color: #fff;
cursor: pointer;
}
button {
margin-top: 10px;
padding: 10px 20px;
background: #feb47b;
border: none;
border-radius: 5px;
color: #fff;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
button:hover:not(:disabled) {
background: #ff7e5f;
}
#outputImage {
max-width: 100%;
border: 2px solid #ff7e5f;
border-radius: 10px;
margin: 15px 0;
}
a {
display: inline-block;
padding: 10px 15px;
background: #ff7e5f;
color: #fff;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}
a:hover {
background: #feb47b;
}
const imageInput = document.getElementById('imageInput');
const convertBtn = document.getElementById('convertBtn');
const canvas = document.getElementById('canvas');
const outputSection = document.getElementById('outputSection');
const outputImage = document.getElementById('outputImage');
const downloadLink = document.getElementById('downloadLink');
imageInput.addEventListener('change', () => {
convertBtn.disabled = !imageInput.files.length;
});
convertBtn.addEventListener('click', () => {
const file = imageInput.files[0];
if (file && file.type === 'image/jpeg') {
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const pngUrl = canvas.toDataURL('image/png');
outputImage.src = pngUrl;
downloadLink.href = pngUrl;
outputSection.style.display = 'block';
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
});
