PNG to JPG Converter
CSS:
css
Copy code
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
padding: 20px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
form {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
input[type="file"] {
display: none;
}
button {
padding: 10px 20px;
background-color: #4285f4;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.result {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#downloadLink {
padding: 10px 20px;
background-color: #4285f4;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
}
#resultImg {
max-width: 100%;
margin-top: 20px;
}
JavaScript:
js
Copy code
function convert() {
const fileInput = document.getElementById("fileInput");
const downloadLink = document.getElementById("downloadLink");
const resultImg = document.getElementById("resultImg");
// Make sure a file is selected
if (fileInput.files.length === 0) {
alert("Please select a PNG file.");
return;
}
const file = fileInput.files[0];
// Create a FileReader object to read the file
const reader = new FileReader();
// Define the function to be called when the FileReader has finished reading the file
reader.onload = function(event) {
// Create an Image object to hold the converted image
const img = new Image();
// Define the function to be called when the Image object has finished loading the converted image
img.onload = function() {
// Create a canvas element to hold the converted image
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
// Draw the converted image onto the canvas
const context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
// Convert the canvas to a JPG file
const convertedFile = canvas.toDataURL("image/jpeg");
// Update the download link and image source with the converted file
Comments
Post a Comment