The Image to PDF Converter project is a simple yet effective web application built using React, allowing users to convert images into PDF documents effortlessly. By leveraging libraries like html2canvas and jsPDF, the application captures the uploaded image and generates a downloadable PDF file.
import React, { useRef, useState } from ‘react’;
import jsPDF from ‘jspdf’;
import html2canvas from ‘html2canvas’;
import ‘./App.css’;
const App = () => {
const imageRef = useRef(null);
const [imageSrc, setImageSrc] = useState(null);
const handleImageUpload = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setImageSrc(reader.result);
};
reader.readAsDataURL(file);
}
};
const handleDownloadPdf = async () => {
const canvas = await html2canvas(imageRef.current);
const imgData = canvas.toDataURL(‘image/png’);
const pdf = new jsPDF();
const imgWidth = 190; // Width of the image in mm
const pageHeight = pdf.internal.pageSize.height; // Page height in mm
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 0;
pdf.addImage(imgData, ‘PNG’, 10, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft – imgHeight;
pdf.addPage();
pdf.addImage(imgData, ‘PNG’, 10, position, imgWidth, imgHeight);
heightLeft -= pageHeight;
}
pdf.save(‘download.pdf’);
};
return (
<div className=”app-container”>
<h1 className=”app-title”>Image to PDF Download</h1>
<input
type=”file”
accept=”image/*”
onChange={handleImageUpload}
className=”upload-input”
/>
<div ref={imageRef} className=”image-container”>
{imageSrc ? (
<img src={imageSrc} alt=”Uploaded” className=”image” />
) : (
<p>No image uploaded. Please upload an image.</p>
)}
</div>
<button
className=”download-button”
onClick={handleDownloadPdf}
disabled={!imageSrc}
>
Download PDF
</button>
</div>
);
};
export default App;
body {
margin: 0;
font-family: ‘Arial’, sans-serif;
background-color: #f4f4f4;
}
.app-container {
text-align: center;
margin: 20px auto;
padding: 20px;
max-width: 600px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.app-title {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
.upload-input {
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
}
.image-container {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
margin-bottom: 20px;
background-color: #f9f9f9;
min-height: 200px; /* Ensures space is available for image */
}
.image {
width: 100%;
height: auto;
display: block;
}
.download-button {
padding: 10px 20px;
font-size: 16px;
color: #ffffff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.download-button:hover {
background-color: #0056b3;
}
.download-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}