{"id":3588,"date":"2022-10-07T14:26:42","date_gmt":"2022-10-07T09:26:42","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3588"},"modified":"2022-10-07T14:26:44","modified_gmt":"2022-10-07T09:26:44","slug":"how-to-add-an-image-from-url-to-pdf-using-jspdf","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/","title":{"rendered":"How to Add an Image From URL to PDF Using jsPDF"},"content":{"rendered":"\n

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\u00a0jsPDF.js<\/strong>\u00a0library, we will use the\u00a0jsPDF.debug.js<\/strong>\u00a0because it includes all the modules which we need.<\/p>\n\n\n\n

The complete source code to add images from URL to PDF using JavaScript library jsPDF is given below.<\/p>\n\n\n\n

var pdf = new jsPDF();\nvar img = new Image;\nimg.onload = function() {\n    pdf.addImage(this, 10, 10);\n    pdf.save("CTStest.pdf");\n    };\nimg.crossOrigin = "";  \n\nimg.src = 'D:\/work\/TiffImages\/png\/895153.0000.png';<\/pre><\/div>\n\n\n\n
let logo = null;\n\ngetDataUri(imgUrl, function(dataUri) {\n    logo = dataUri;\n    console.log("logo=" + logo);\n});\n\nfunction getDataUri(url, cb)\n {\n        var image = new Image();\n        image.setAttribute('crossOrigin', 'anonymous'); \/\/getting images from external domain\n\n        image.onload = function () {\n            var canvas = document.createElement('canvas');\n            canvas.width = this.naturalWidth;\n            canvas.height = this.naturalHeight; \n\n            \/\/next three lines for white background in case png has a transparent background\n            var ctx = canvas.getContext('2d');\n            ctx.fillStyle = '#fff';  \/\/\/ set white fill style\n            ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n            canvas.getContext('2d').drawImage(this, 0, 0);\n\n            cb(canvas.toDataURL('image\/jpeg'));\n        };\n\n        image.src = url;\n   }<\/pre><\/div>\n\n\n\n
Now to generate the pdf document use the code below.<\/p>\n\n\n\n
var doc = new jsPDF();\n\nlet left = 15;\nlet top = 8;\nconst imgWidth = 100;\nconst imgHeight = 100;\n\ndoc.addImage(logo, 'PNG', left, top, imgWidth, imgHeight);\n\ndoc.output('dataurlnewwindow'); \/\/opens pdf in new tab<\/pre><\/div>\n\n\n\n
Add an Image From URL to PDF Using jsPDF<\/h2>\n\n\n\n
index.html<\/h3>\n\n\n\n
<html>\n<meta charset="utf-8" \/>\n\n<body>\n\n    <div style='font-size:30px'>\n        <button style='font-size:50px' onclick="jsPDFimages()">create pdf<\/button>\n    <\/div>\n<\/body>\n\n<\/html>\n<script src="https:\/\/unpkg.com\/jspdf@latest\/dist\/jspdf.min.js"><\/script>\n\n<script>\n    \/\/ , 'img2': 'https:\/\/www.pexels.com\/photo\/pink-peace-light-sign-752473\/'\n    const doc = new jsPDF();\n    const imagesWidth = []\n    const imgDataList = []\n    const img = new Image();\n    \/\/ const imagesList = { 'imag1': 'https:\/\/crm-commercial.web.app\/img\/nowlogox.68c6e596.png' }\n\n    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' }\n\n    var ImageToLoad = new Image();\n    jsPDFimages()\n\n    function getImageFromUrl(url, callback) {\n\n        ImageToLoad.crossOrigin = "Anonymous";\n\n        ImageToLoad.onError = function () {\n            console.log('Cannot load image: "' + url + '"');\n        };\n\n        ImageToLoad.onload = function () {\n            alert("image is loaded");\n        }\n\n        ImageToLoad.onload = function () {\n            imagesWidth.push({\n                width: ImageToLoad.width,\n                height: ImageToLoad.height\n            })\n            callback(ImageToLoad);\n        };\n        ImageToLoad.src = url;\n        createPDF(ImageToLoad)\n    }\n\n\n\n    function createPDF(imgData) {\n        imgDataList.push(imgData)\n        \/\/ Rotate Image angle: -20,\n        var pwidth = doc.internal.pageSize.getWidth();\n        var pheight = doc.internal.pageSize.getHeight();\n        var maxWidth = pwidth - 40; \/\/ Max width for the image\n        var maxHeight = pheight - 40;    \/\/ Max height for the image\n        var ratio = 0;  \/\/ Used for aspect ratio\n        var width = imgData.width;    \/\/ Current image width\n        var height = imgData.height;  \/\/ Current image height\n        \/\/ Check if the current width is larger than the max\n        if (width > maxWidth) {\n            ratio = maxWidth \/ width;   \/\/ get ratio for scaling image\n            \/\/ $(this).css("width", maxWidth); \/\/ Set new width\n            \/\/ $(this).css("height", height * ratio);  \/\/ Scale height based on ratio\n            height = height * ratio;    \/\/ Reset height to match scaled image\n            width = width * ratio;    \/\/ Reset width to match scaled image\n        }\n        \/\/ Check if current height is larger than max\n        if (height > maxHeight) {\n            ratio = maxHeight \/ height; \/\/ get ratio for scaling image\n            \/\/ $(this).css("height", maxHeight);   \/\/ Set new height\n            \/\/ $(this).css("width", width * ratio);    \/\/ Scale width based on ratio\n            width = width * ratio;    \/\/ Reset width to match scaled image\n            height = height * ratio;    \/\/ Reset height to match scaled image\n        }\n        doc.addImage({\n            imageData: imgData,\n            x: 20,\n            y: 5,\n            w: width,\n            h: height,\n            angle: -20\n        });\n        if (imgDataList.length !== Object.keys(imagesList).length)\n            doc.addPage();\n        if (imgDataList.length == Object.keys(imagesList).length) {\n            doc.save('sample-file.pdf');\n            \/\/window.open(doc.output('bloburl'), '_blank');\n        }\n    }\n\n    function jsPDFimages() {\n\n\n\n        for (var item in imagesList) {\n            getImageFromUrl(imagesList[item], createPDF);\n        }\n    }\n<\/script><\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
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\u00a0jsPDF.js\u00a0library, we will use the\u00a0jsPDF.debug.js\u00a0because 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 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":1762,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to Add an Image From URL to PDF Using jsPDF<\/title>\n<meta name=\"description\" content=\"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\u00a0jsPDF.js\u00a0library,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add an Image From URL to PDF Using jsPDF\" \/>\n<meta property=\"og:description\" content=\"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\u00a0jsPDF.js\u00a0library,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T09:26:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T09:26:44+00:00\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Add an Image From URL to PDF Using jsPDF","description":"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\u00a0jsPDF.js\u00a0library,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/","og_locale":"en_US","og_type":"article","og_title":"How to Add an Image From URL to PDF Using jsPDF","og_description":"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\u00a0jsPDF.js\u00a0library,","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T09:26:42+00:00","article_modified_time":"2022-10-07T09:26:44+00:00","author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to Add an Image From URL to PDF Using jsPDF","datePublished":"2022-10-07T09:26:42+00:00","dateModified":"2022-10-07T09:26:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/"},"wordCount":95,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/","name":"How to Add an Image From URL to PDF Using jsPDF","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","datePublished":"2022-10-07T09:26:42+00:00","dateModified":"2022-10-07T09:26:44+00:00","description":"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\u00a0jsPDF.js\u00a0library,","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/02\/default_featured_image.jpg","width":880,"height":495,"caption":"Default Featured Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-add-an-image-from-url-to-pdf-using-jspdf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add an Image From URL to PDF Using jsPDF"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"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.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3588","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3588"}],"version-history":[{"count":1,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3588\/revisions"}],"predecessor-version":[{"id":3589,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3588\/revisions\/3589"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/1762"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}