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