Actually when I am pasting below code in blog article source code then it convert to result. But I want to show code in article. Show that user can see this. Like I am pasting here and you can see code.
<!DOCTYPE html>
<html>
<head>
<title>PNG to JPEG Converter</title>
<script>
function convertToJPEG() {
const input = document.getElementById("fileInput");
const file = input.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.src = e.target.result;
img.onload = function() {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const jpegData = canvas.toDataURL("image/jpeg");
const jpegLink = document.createElement("a");
jpegLink.href = jpegData;
jpegLink.download = "converted.jpg";
jpegLink.click();
};
};
reader.readAsDataURL(file);
}
}
</script>
</head>
<body>
<div style="text-align: center;">
<h2>PNG to JPEG Converter</h2>
<input type="file" id="fileInput" accept="image/png">
<button onclick="convertToJPEG()">Convert to JPEG</button>
</div>
</body>
</html>