Get this code Here :
<html lang="en">
<head>
<meta charset="UTF-8"></meta>
<meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
<title>Image to PDF Converter</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
padding: 20px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input[type="file"] {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
margin-top: 20px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: #fff;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Image to PDF Converter</h1>
<input accept="image/*" id="imageUpload" multiple="" type="file" />
<button id="convertBtn">Convert to PDF</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script>
document.getElementById('convertBtn').addEventListener('click', () => {
const { jsPDF } = window.jspdf;
const files = document.getElementById('imageUpload').files;
if (files.length === 0) {
alert('Please select at least one image.');
return;
}
const pdf = new jsPDF();
let count = 0;
for (let i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
if (count > 0) {
pdf.addPage();
}
const width = pdf.internal.pageSize.getWidth();
const height = pdf.internal.pageSize.getHeight();
pdf.addImage(img, 'JPEG', 0, 0, width, height);
count++;
if (count === files.length) {
pdf.save('images.pdf');
}
}
};
reader.readAsDataURL(files[i]);
}
});
</script>
</body>
</html>
Explanation
HTML Structure
DOCTYPE and HTML Tags
<!DOCTYPE html>: Specifies the document type and version of HTML (HTML5).<html lang="en">: Root element with the language attribute set to English.
Head Section
<head>: Contains meta-information about the document.<meta charset="UTF-8">: Sets the character encoding to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures proper rendering on mobile devices by setting the viewport width to the device width.<title>Image to PDF Converter</title>: The title of the page displayed in the browser tab.<style>: Contains CSS styles to make the page look nice.
Body Section
<body>: Contains the content of the document..container: A div with class "container" that wraps all the main elements.<h1>: The main heading of the page.<input type="file" id="imageUpload" accept="image/*" multiple>: A file input to allow users to upload multiple images.<button id="convertBtn">Convert to PDF</button>: A button to trigger the conversion process.
CSS Styling
Body and Container Styles
body: Styles the body element to use Arial font, center the content, and set the background color..container: Styles the container with a white background, rounded corners, shadow effects, and padding.
Input and Button Styles
input[type="file"]: Styles the file input with margins, padding, border, and border-radius.button: Styles the convert button with padding, border-radius, background color, font settings, and hover effects.
JavaScript Functionality
- Script Section
- Adds an event listener to the convert button that triggers the conversion process when clicked.
File Input Element
- Retrieves the file input element and checks if at least one file has been selected. If not, it alerts the user.
jsPDF Library
- Uses the jsPDF library to create a new PDF document.
FileReader and Image Elements
- Loops through the selected files and creates a FileReader to read each image file.
- When the file is loaded, creates an Image object with the result.
Canvas Drawing
- Sets the canvas dimensions to match the uploaded image.
- Draws the image onto the canvas using
ctx.drawImage.
Adding Images to PDF
- Sets the dimensions of the PDF page to match the image dimensions.
- Adds the image to the PDF document using
pdf.addImage. - If there are multiple images, adds a new page for each subsequent image using
pdf.addPage.
Saving the PDF
- Once all images have been added, saves the PDF document with the name 'images.pdf'.
0 Comments