Image to PDF Converter using JavaScript & CSS Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<style>
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: linear-gradient(133deg, #4abeb2, #3c57d2);
color: #000;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.container{
background: white;
width: 450px;
padding: 30px;
border-radius: 5px;
}
input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
}
.button{
display: flex;
}
#showImg{
display: block;
margin: 0 auto;
max-width: 400px;
min-height: 200px;
background: #174353;
border-radius: 5px;
}
button,.upload{
width: 220px;
margin: 50px 20px 10px 20px ;
text-align: center;
position: relative;
padding: 10px 5px;
font-size: 17px;
outline: none;
color: #fff;
border: none;
background-color: #023780;
border-radius: 5px;
display: block;
}
.upload{
background: #a74901;
}
</style>
</head>
<body>
<div class="container">
<img id="showImg" src="images/img.png">
<div class="button">
<div class="upload">
<input type="file" onChange="loadFile(event)" name="" accept=".png, .jpg, .jpeg">
Upload Image
</div>
<button onClick="pdfDown()">Download To PDF</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script>
var newImage, showImg;
function loadFile(event) {
showImg = document.getElementById('showImg');
showImg.src = URL.createObjectURL(event.target.files[0]);
newImage = document.createElement('img');
newImage.src = URL.createObjectURL(event.target.files[0]);
showImg.onload = function() {
URL.revokeObjectURL(showImg.src) // free memory
}
};
function pdfDown(){
console.log(newImage)
var doc = new jsPDF();
doc.addImage(newImage,10,10);
doc.save('ImgToPDF.pdf')
}
</script>
</body>
</html>
