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' onclick="jsPDFimages()">create pdf</button>
    </div>
</body>

</html>
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>

<script>
    // , 'img2': 'https://www.pexels.com/photo/pink-peace-light-sign-752473/'
    const doc = new jsPDF();
    const imagesWidth = []
    const imgDataList = []
    const img = new Image();
    // const imagesList = { 'imag1': 'https://crm-commercial.web.app/img/nowlogox.68c6e596.png' }

    const imagesList = { 'imag1': 'https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg', 'image2': 'https://as2.ftcdn.net/jpg/00/42/98/87/500_F_42988762_JMNpHWOFWnbtCBZeYsRo5PmzD28rIquS.jpg' }

    var ImageToLoad = new Image();
    jsPDFimages()

    function getImageFromUrl(url, callback) {

        ImageToLoad.crossOrigin = "Anonymous";

        ImageToLoad.onError = function () {
            console.log('Cannot load image: "' + url + '"');
        };

        ImageToLoad.onload = function () {
            alert("image is loaded");
        }

        ImageToLoad.onload = function () {
            imagesWidth.push({
                width: ImageToLoad.width,
                height: ImageToLoad.height
            })
            callback(ImageToLoad);
        };
        ImageToLoad.src = url;
        createPDF(ImageToLoad)
    }



    function createPDF(imgData) {
        imgDataList.push(imgData)
        // Rotate Image angle: -20,
        var pwidth = doc.internal.pageSize.getWidth();
        var pheight = doc.internal.pageSize.getHeight();
        var maxWidth = pwidth - 40; // Max width for the image
        var maxHeight = pheight - 40;    // Max height for the image
        var ratio = 0;  // Used for aspect ratio
        var width = imgData.width;    // Current image width
        var height = imgData.height;  // Current image height
        // Check if the current width is larger than the max
        if (width > maxWidth) {
            ratio = maxWidth / width;   // get ratio for scaling image
            // $(this).css("width", maxWidth); // Set new width
            // $(this).css("height", height * ratio);  // Scale height based on ratio
            height = height * ratio;    // Reset height to match scaled image
            width = width * ratio;    // Reset width to match scaled image
        }
        // Check if current height is larger than max
        if (height > maxHeight) {
            ratio = maxHeight / height; // get ratio for scaling image
            // $(this).css("height", maxHeight);   // Set new height
            // $(this).css("width", width * ratio);    // Scale width based on ratio
            width = width * ratio;    // Reset width to match scaled image
            height = height * ratio;    // Reset height to match scaled image
        }
        doc.addImage({
            imageData: imgData,
            x: 20,
            y: 5,
            w: width,
            h: height,
            angle: -20
        });
        if (imgDataList.length !== Object.keys(imagesList).length)
            doc.addPage();
        if (imgDataList.length == Object.keys(imagesList).length) {
            doc.save('sample-file.pdf');
            //window.open(doc.output('bloburl'), '_blank');
        }
    }

    function jsPDFimages() {



        for (var item in imagesList) {
            getImageFromUrl(imagesList[item], createPDF);
        }
    }
</script>

Add an Image From URL to PDF Using jsPDF

index.html

Related posts:

Leave a Comment Cancel reply