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>
Enter fullscreen mode
Exit fullscreen mode
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)