Scribd
Upload
240 views2 pages

Allfreestore

This document is an HTML page for a PNG to JPG converter tool. It includes a file input for uploading PNG images, a preview area, and a download link for the converted JPG file. The conversion is handled by JavaScript, which uses a canvas element to process the image data and generate the JPG format.

Uploaded by

hitesh18022008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
240 views2 pages

Allfreestore

This document is an HTML page for a PNG to JPG converter tool. It includes a file input for uploading PNG images, a preview area, and a download link for the converted JPG file. The conversion is handled by JavaScript, which uses a canvas element to process the image data and generate the JPG format.

Uploaded by

hitesh18022008
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html>
<head>
<title>PNG to JPG Converter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}

#preview {
max-width: 300px;
max-height: 300px;
margin: 20px auto;
}

#output {
display: none;
}

#downloadLink {
display: none;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>PNG to JPG Converter</h1>
<input type="file" id="fileInput" accept=".png">
<div id="preview"></div>
<div id="output"></div>
<a href="#" id="downloadLink" download="converted.jpg">Download Converted
JPG</a>

<script>
window.onload = function() {
const fileInput = document.getElementById('fileInput');
const preview = document.getElementById('preview');
const output = document.getElementById('output');
const downloadLink = document.getElementById('downloadLink');

fileInput.addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();

reader.onload = function(e) {
preview.innerHTML = `<img src="${e.target.result}"
alt="Preview">`;
output.innerHTML = 'Converting...';
convertToJpg(e.target.result);
}

reader.readAsDataURL(file);
});

function convertToJpg(dataUrl) {
const canvas = document.createElement('canvas');
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 jpgDataUrl = canvas.toDataURL('image/jpeg');

output.innerHTML = 'Conversion complete!';


downloadLink.href = jpgDataUrl;
downloadLink.style.display = 'inline-block';
};

img.src = dataUrl;
}
};
</script>
</body>
</html>

You might also like