Advanced and Fully Functional PDF to Image Converter:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF to Image Converter</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background: linear-gradient(to right, #1f4037, #99f2c8);
color: white;
font-family: 'Poppins', sans-serif;
padding: 20px;
}
.container {
margin-top: 50px;
}
.converter-box {
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 30px;
text-align: center;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.header {
font-size: 34px;
font-weight: bold;
margin-bottom: 20px;
}
.upload-btn,
.convert-btn {
background-color: #ff7f50;
color: white;
padding: 12px 35px;
border: none;
border-radius: 50px;
cursor: pointer;
margin: 15px 5px;
transition: background-color 0.3s ease-in-out, transform 0.2s;
}
.upload-btn:hover,
.convert-btn:hover {
background-color: #ff6347;
transform: scale(1.05);
}
.output-images {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.output-images img {
max-width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="container">
<div class="converter-box">
<div class="header">PDF to Image Converter</div>
<input type="file" id="pdfFile" accept="application/pdf" class="upload-btn">
<button class="convert-btn" id="convertBtn">Convert PDF</button>
<div class="output-images" id="output"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>
<script>
$('#convertBtn').on('click', function () {
var fileInput = document.getElementById('pdfFile');
var file = fileInput.files[0];
if (file && file.type === "application/pdf") {
var reader = new FileReader();
reader.onload = function (e) {
var pdfData = new Uint8Array(e.target.result);
pdfjsLib.getDocument({ data: pdfData }).promise.then(function (pdf) {
var outputDiv = $('#output');
outputDiv.html(''); // Clear previous images
function renderPage(pageNumber) {
pdf.getPage(pageNumber).then(function (page) {
var viewport = page.getViewport({ scale: 2 });
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: context,
viewport: viewport
}).promise.then(function () {
var img = document.createElement('img');
img.src = canvas.toDataURL('image/png');
outputDiv.append(img);
if (pageNumber < pdf.numPages) {
renderPage(pageNumber + 1);
}
});
});
}
renderPage(1);
}).catch(function (error) {
alert('Error processing PDF: ' + error.message);
});
};
reader.readAsArrayBuffer(file);
} else {
alert("Please upload a valid PDF file.");
}
});
</script>
</body>
</html>
Key Improvements:
-
Sequential Rendering: Each page of the PDF is processed in order, ensuring that images are displayed sequentially.
-
Enhanced UI/UX: Added smooth transitions, animations, and better visual feedback to make the interface more appealing and user-friendly.
-
Robust Error Handling: Alerts are shown for any errors in processing, ensuring the user is informed about issues.
-
High-Resolution Output: The images are rendered with a higher scale (2x) for better clarity.
Top comments (0)