jsPDF Tutorial to Add Image inside PDF Document Using Base64 Code in Javascript

Welcome folks today in this blog post we will be adding the pdf document in pdf document using base64 code using javascript in browser. 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 inside the root directory and copy paste the below code

First of all we will be including the jspdf cdn library in the 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>jsPDF Add Image Using Base64 in PDF Document</title>
</head>
<body>
   
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>jsPDF Add Image Using Base64 in PDF Document</title>

</head>

<body>

</body>

</html>

As you can see we are including the script tag which contains the jspdf cdn in the above code.

Adding the File Input in HTML

Now we will be adding the file input tag where we will be taking the user input and we will allow the user to upload the image files inside the browser and copy paste the below code

 <input type="file">
 <button>Create PDF</button>

1 2	<input type="file"> <button>Create PDF</button>

As you can see we have added the input file tag and we have the button of create PDF to export the uploaded image to pdf document.

As you can see we have the input file and then we have the button. Now we need to define the event handlers to these input elements

Adding the Event Listeners

<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>

Now we will be adding the event listeners to all the input elements. First of all we will be attaching the onchange event handler whenever the input image is uploaded and this function will automatically be executed which is the encodeImage() here we are passing the actual image which is uploaded as an argument. This onchange event will automatically get called when the value of the file will change.

And also we are attaching the onclick event listener whenever the button is clicked to generate pdf using the createPDF() method that we will define later on.

Converting the Uploaded Image to Base64 Code

Now guys inside the encodedImage() method we will be converting the uploaded image by the user to base64 code using the fileReader class 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 declaring the variable imgData where we will be storing the base64 code of the image. For this we are using the fileReader class to create a new object of it. Through the fileReader object we are using the event called as onloadend to get the base64 code of selected image file. And then we are getting base64 code using result property. And also we are using the readAsDataURL() method to convert the image to Data URL or base64 code.

Now if you select the image file using the input element in the browser you will see the below result which is the base64 code in the console of the browser as shown below

As you can see we have the big random string which is the base64 code of the image. So we have successfully exported the big image file to a random string which is called as base64 code. Now we need to use this base64 code to export the image to the pdf document.

Exporting the Base64 Code to PDF Document

Now with the help of jsPDF Library we will be exporting the base64 code of the image uploaded by the user to the pdf document. For this we are first of all initializing the new object of jsPDF. And after that we are using the addImage() method of jspdf to add the base64 code of the image and then we are providing the x and y coordinates and after that we are saving the pdf document using the save() method and there we are providing the custom file name as shown below

function createPDF(){
        var doc = new jsPDF()
        doc.addImage(imgData,10,10)
        doc.save("output.pdf")
}

function createPDF(){

var doc = new jsPDF()

doc.addImage(imgData,10,10)

doc.save("output.pdf")

}

Full Source Code

Wrapping it up just see the entire source code of index.html file as shown below

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>
    <input type="file" onchange="encodeImage(this)">
    <button onclick="createPDF()">Create PDF</button>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/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()
        doc.addImage(imgData,10,10)
        doc.save("output.pdf")
    }
</script>

</html>