jsPDF Tutorial to Add & Fit PNG & GIF Images Using Base64 Code to PDF Document Page Size in Browser

Welcome folks today in this blog post we will be adding png,jpg images in pdf document according to the page size width and height. We will be fitting the images in pdf document perfectly using jspdf library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the below code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

As you can see we are including the cdn for the jspdf library the version is 1.5.3 this is very important you need to use the latest version for this application to work. So include the script tag. And now after that we will have the different dom elements for this App

Add the DOM Elements in App

<input type="file" onchange="encodeImage(this)">
<button onclick="createPDF()">Create PDF</button>

1 2	<input type="file" onchange="encodeImage(this)"> <button onclick="createPDF()">Create PDF</button>

As you can see we have the file input element where we are allowing the user to upload image files and also attaching a onchange event listener so whenever the file is changed this will automatically trigger and we are executing the function called encodeImage() and passing the actual image as an parameter. And also we have the button to create pdf document. And we have binded the onClick event listener and we are executing the method createPDF() method as shown below

Now we will be writing the javascript code for this application. First of all we will be defining the encodeImage() function as shown below

 var imgData = ""

    function encodeImage(image) {
        var img = image.files[0]

        var file = new FileReader()

        file.onloadend = function () {
            console.log(file.result)
            imgData = file.result
        }

        file.readAsDataURL(img)

    }

var imgData = ""

function encodeImage(image) {

var img = image.files[0]

var file = new FileReader()

file.onloadend = function () {

console.log(file.result)

imgData = file.result

}

file.readAsDataURL(img)

}

As you can see we are loading the image using the fileReader() api and then converting the image to the base64 code and then we are storing that code inside the imgData variable.

And after that we need to fit this base64 code image to the pdf document. For that we need to first of calculate the width and height of the pdf document using jspdf this can be done like this as shown below

 function createPDF() {
        var doc = new jsPDF("p", "mm", "a4");

        var width = doc.internal.pageSize.getWidth();
        var height = doc.internal.pageSize.getHeight();
        doc.addImage(imgData, 'PNG', 0, 0, width, height)
        doc.save("output.pdf")
    }

function createPDF() {

var doc = new jsPDF("p", "mm", "a4");

var width = doc.internal.pageSize.getWidth();

var height = doc.internal.pageSize.getHeight();

doc.addImage(imgData, 'PNG', 0, 0, width, height)

doc.save("output.pdf")

}

As you can see we have defined the function of createPDF() inside this function we have made an object of jsPDF and passing some measurement properties as arguments. And then we are calculating the width and height of the pdf document using the jspdf object and after that we are adding the base64 code image to the pdf using addImage() method and then we are also writing the extension of the image file and then we need to fit to the size of the pdf document. For this we are passing the x and y coordinates to 0 and width and height is also set to the calculated width and height to the pdf document.

This completes the blog post atlast you can see the full index.html file as shown below

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="file" onchange="encodeImage(this)">
    <button onclick="createPDF()">Create PDF</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
    var imgData = ""

    function encodeImage(image) {
        var img = image.files[0]

        var file = new FileReader()

        file.onloadend = function () {
            console.log(file.result)
            imgData = file.result
        }

        file.readAsDataURL(img)

    }

    function createPDF() {
        var doc = new jsPDF("p", "mm", "a4");

        var width = doc.internal.pageSize.getWidth();
        var height = doc.internal.pageSize.getHeight();
        doc.addImage(imgData, 'PNG', 0, 0, width, height)
        doc.save("output.pdf")
    }
</script>

</html>