How to Add Image From URL When Generating PDF in JavaScript

Home
/
Articles
/
How to Add Image From URL When Generating PDF in JavaScript

The sample below shows how to add image from URL during PDF generation in JavaScript with BytescoutPDF.js (Bytescout PDF Generator for JavaScript).

// function that creates BytescoutPDF instance (defined in BytescoutPDF.js script which have to be included into the same page)
// then calls API methods and properties to create PDF document
// and returns created BytescoutPDF object instance
// this CreatePDF() function is called from Sample.html

function CreatePDF() {

    // create BytescoutPDF object instance
    var pdf = new BytescoutPDF();

    // set document properties: Title, subject, keywords, author name and creator name
    pdf.propertiesSet("Sample document title", "Sample subject", "keyword1, keyword 2, keyword3", "Document Author Name", "Document Creator Name");

    // set page size
    pdf.pageSetSize(BytescoutPDF.A4);

    // set page orientation (BytescoutPDF.PORTRAIT = portrait, BytescoutPDF.LANDSCAPE = landscape)
    pdf.pageSetOrientation(BytescoutPDF.PORTRAIT);

    // add new page
    pdf.pageAdd();

    // load image from local file
    pdf.imageLoadFromUrl('image1.jpg');
    // place this mage at given X, Y coordinates on the page
    pdf.imagePlace(20, 40);

    // load image from local file
    pdf.imageLoadFromUrl('image2.jpg');
    // placeimage at given X, Y coordinate
    pdf.imagePlace(120, 220);


    // return BytescoutPDF object instance
    return pdf;
}

Generated PDF file with image from URL (click to view full size):

Tutorials:

Web API