How to create HTML Image to PDF converter using JavaScript

Creative Javascript | February 20, 2022

Today in this blog you’ll learn how to create Image to PDF converter using JavaScript. We used HTML CSS and JavaScript plugin jsPDF to create this Image to PDF converter.

Video tutorial of How to create HTML Image to PDF converter using JavaScript

This tutorial video can help you to create HTML Image to PDF converter using JavaScript

You might like this

How to create HTML Image to PDF converter using JavaScript [Source Codes]

This source code can help you to create HTML Image to PDF converter using JavaScript
Plugin source

HTML Code

Copy

<!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>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="upload-file">
		<input type="file" onChange="loadFile(event)" name="" accept=".png, .jpg, .jpeg">
		Upload Image
	</div>
	<img id="showImg" src="images/img.png">
	<button onClick="pdfDown()">Image To PDF</button>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*: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;
}

.upload-file{
	width: 300px;
	margin: 0 auto 30px;
	text-align: center;
	position: relative;
	padding: 15px;
	font-size: 22px;
	color: #fff;
	background-color: #000;
	border-radius: 25px;
}
.upload-file input{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 1;
}
#showImg{
	display: block;
	margin: 0 auto;
	max-width: 400px;
	border-radius: 25px;
}
button{
	width: 300px;
	margin: 30px auto ;
	text-align: center;
	position: relative;
	padding: 15px;
	font-size: 22px;
	color: #fff;
	background-color: #000;
	border-radius: 25px;
	display: block;
}

JavaScript Code

Copy

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')
}