Skip to content

Coding Shiksha

Menu
  • Home
  • Youtube Channel
  • Online Store
  • Online Tools
  • Donate Us
  • Sitemap
  • Privacy Policy
Menu

jsPDF Tutorial to Add Image From URL in PDF Document Using Javascript Full Project For Beginners

Posted on October 29, 2022

Welcome folks today in this blog post we will be adding image from url in pdf document using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to copy paste the jspdf library cdn in the index.html file as shown below

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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 From URL in PDF Document</title>
</head>
<body>
  
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</html>

 

 

Now we need to add the html5 form in which we will have the input fields to allow the user to enter the url of the image to add the image inside the pdf document. And also we have the add image in pdf button as shown below

 

 

1
2
3
4
5
<h1>jsPDF Add Image From URL in PDF Document</h1>
    <form id="form">
        <input type="text" id="url" placeholder="Enter Image URL" required/>
        <button>Add Image in PDF Document</button>
    </form>

 

 

 

As you can see we have the input field where we will enter the url of the image and then we have the button to add the image inside the pdf document.

 

 

Now we will be writing the javascript code to add the url of the image inside the pdf document as shown below

 

 

JavaScript
1
2
3
4
5
6
7
let form = document.getElementById('form')
 
form.addEventListener('submit',(e) => {
    e.preventDefault()
    let url = document.getElementById('url').value
    getDataUri(url,createPDF)
})

 

 

As you can see we are attaching the form submit event listener to the form and inside this we are first of all preventing the auto completion of the form and also we are getting the value of url of the image. And then we are calling the custom function which is called getDataUri() which takes two arguments. First it takes the url of the image and secondly it takes the callback function.

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getDataUri(url,callback)
{
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain
        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
 
            //next three lines for white background in case png has a transparent background
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#fff';  /// set white fill style
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            canvas.getContext('2d').drawImage(this, 0, 0);
            // resolve(canvas.toDataURL('image/jpeg'));
            callback(canvas.toDataURL('image/jpeg'));
        };
        image.src = url;  
}

 

 

As you can see in this above method we are getting the url of the image and also the callback function. Here first of all we are initializing the image() constructor and then we are setting the crossorigin attribute to anoymous and then we are attaching the src property of the image element to the passed url. And when the onload event occurs for the image element here first of all we are creating the canvas element and attaching the canvas width and height to the natural image width and height. And then we are drawing the image on th canvas using the 2d context and then we are getting the base64 code of the image and then passing that to the callback function to insert the base64 coded image to the pdf document.

 

Now we will define the callback function to create the pdf document using the jspdf library as shown below

 

 

JavaScript
1
2
3
4
5
function createPDF(logo) {
    let doc = new jsPDF()
    doc.addImage(logo, 'jpg', 0, 5, 50, 50);
    doc.save('sample-file.pdf');
}

 

 

As you can see in the above function we are just taking the base64 code of the image in the argument and then we are creating a new jspdf document and then we are using the addImage() method to insert the base64 code of the image to the pdf document. And then saving the pdf document with the custom filename. And now if you open the app inside the browser you will see the below pdf file created once you enter the url of the image to insert as shown below.

 

 

 

 

 

Full Source Code

 

 

Wrapping it up the full source code of index.html file is shown below

 

 

index.html

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!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 From URL in PDF Document</title>
</head>
<body>
    <h1>jsPDF Add Image From URL in PDF Document</h1>
    <form id="form">
        <input type="text" id="url" placeholder="Enter Image URL" required/>
        <button>Add Image in PDF Document</button>
    </form>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script>
 
let form = document.getElementById('form')
 
form.addEventListener('submit',(e) => {
    e.preventDefault()
    let url = document.getElementById('url').value
    getDataUri(url,createPDF)
})
 
function getDataUri(url,callback)
{
        var image = new Image();
        image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain
        image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
 
            //next three lines for white background in case png has a transparent background
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = '#fff';  /// set white fill style
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            canvas.getContext('2d').drawImage(this, 0, 0);
            // resolve(canvas.toDataURL('image/jpeg'));
            callback(canvas.toDataURL('image/jpeg'));
        };
        image.src = url;  
}
 
 
function createPDF(logo) {
    let doc = new jsPDF()
    doc.addImage(logo, 'jpg', 0, 5, 50, 50);
    doc.save('sample-file.pdf');
}
</script>
</html>

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2023 Coding Shiksha | Design: Newspaperly WordPress Theme