How to Add an Image From URL to PDF Using jsPDF

In this tutorial, you will learn how to add an image from a URL to a PDF document using the jsPDF library. Basically, instead of using jsPDF.js library, we will use the jsPDF.debug.js because it includes all the modules which we need.

The complete source code to add images from URL to PDF using JavaScript library jsPDF is given below.

var pdf = new jsPDF();
var img = new Image;
img.onload = function() {
    pdf.addImage(this, 10, 10);
    pdf.save("CTStest.pdf");
    };
img.crossOrigin = "";  

img.src = 'D:/work/TiffImages/png/895153.0000.png';

let logo = null;

getDataUri(imgUrl, function(dataUri) {
    logo = dataUri;
    console.log("logo=" + logo);
});

function getDataUri(url, cb)
 {
        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);

            cb(canvas.toDataURL('image/jpeg'));
        };

        image.src = url;
   }

Now to generate the pdf document use the code below.

var doc = new jsPDF();

let left = 15;
let top = 8;
const imgWidth = 100;
const imgHeight = 100;

doc.addImage(logo, 'PNG', left, top, imgWidth, imgHeight);

doc.output('dataurlnewwindow'); //opens pdf in new tab

Add an Image From URL to PDF Using jsPDF

index.html

<html>
<meta charset="utf-8" />

<body>

    <div style='font-size:30px'>
        <button style='font-size:50px' >

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.