> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/samples/addimagetest.md). # Add Image to PDF - Sample Code Sample JavaScript code to use Apryse SDK for inserting various raster image formats (e.g. TIFF, JPEG, JPEG2000, JBIG2, GIF, PNG, BMP, etc.) into a PDF document. {% hint style="info" %} **Requirements** *These packages are required to use these features in production. Trial keys have unlimited access to all features* Web SDKFull API {% endhint %} Sample JavaScript code to use Apryse Web SDK for programmatically inserting various raster image formats (e.g. TIFF, JPEG, JPEG2000, JBIG2, GIF, PNG, BMP, etc.) into a PDF document. Learn more about our [Web SDK](/web/get-started/guides.md), [Full-API for WebViewer](/web/full-api/full-api-overview.md) and [PDF Editing & Manipulation Library](/core/page-manipulation/manipulation.md). ### **Implementation steps** Step 1: Follow [get started in your preferred web stack for WebViewer](/web/get-started/readme.md) Step 2: [Enable the full API ](/web/full-api/full-api-overview.md)by passing the `fullAPI` option into the WebViewer constructor Step 3: Add the sample code provided in this guide This full sample is one of many included in the [manual download of WebViewer.](/web/get-started/manually.md#1-download-webviewer) 
//---------------------------------------------------------------------------------------
// Copyright (c) 2001-2023 by Apryse Software Inc. All Rights Reserved.
// Consult legal.txt regarding legal and license information.
//---------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------
// Copyright (c) 2001-2023 by Apryse Software Inc. All Rights Reserved.
// Consult legal.txt regarding legal and license information.
//---------------------------------------------------------------------------------------

(exports => {

  exports.runAddImageTest = () => {
    const PDFNet = exports.Core.PDFNet;

    const main = async () => {
      try {
        // Relative path to the folder containing test files.
        const inputURL = '../TestFiles/';

        const doc = await PDFNet.PDFDoc.create();
        doc.initSecurityHandler();
        doc.lock();

        const builder = await PDFNet.ElementBuilder.create(); // ElementBuilder, used to build new element Objects
        // create a new page writer that allows us to add/change page elements
        const writer = await PDFNet.ElementWriter.create(); // ElementWriter, used to write elements to the page
        // define new page dimensions
        const pageRect = await PDFNet.Rect.init(0, 0, 612, 794);
        let page = await doc.pageCreate(pageRect);

        writer.beginOnPage(page, PDFNet.ElementWriter.WriteMode.e_overlay);

        // Adding a JPEG image to output file
        let img = await PDFNet.Image.createFromURL(doc, inputURL + 'peppers.jpg');
        let matrix = await PDFNet.Matrix2D.create(200, 0, 0, 250, 50, 500);
        const matrix2 = await PDFNet.Matrix2D.createZeroMatrix();
        await matrix2.set(200, 0, 0, 250, 50, 500);
        let element = await builder.createImageFromMatrix(img, matrix2);
        writer.writePlacedElement(element);

        // Add a PNG to output file
        img = await PDFNet.Image.createFromURL(doc, inputURL + 'butterfly.png');
        matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 300, 500);
        element = await builder.createImageFromMatrix(img, matrix);
        writer.writePlacedElement(element);

        // Add a GIF image to the output file
        img = await PDFNet.Image.createFromURL(doc, inputURL + 'pdfnet.gif');
        matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 50, 350);
        element = await builder.createImageFromMatrix(img, matrix);
        writer.writePlacedElement(element);

        // Add a TIFF image to the output file
        img = await PDFNet.Image.createFromURL(doc, inputURL + 'grayscale.tif');
        matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 10, 50);
        element = await builder.createImageFromMatrix(img, matrix);
        writer.writePlacedElement(element);
        writer.end();
        doc.pagePushBack(page);

        // Embed monochrome TIFF compressed using lossy JBIG2 filter
        page = await doc.pageCreate(pageRect);
        writer.beginOnPage(page, 1, true, true);

        const hintSet = await PDFNet.ObjSet.create();
        const enc = await hintSet.createArray();
        await enc.pushBackName('JBIG2');
        await enc.pushBackName('Lossy');

        img = await PDFNet.Image.createFromURL(doc, inputURL + 'multipage.tif', enc);
        matrix = await PDFNet.Matrix2D.create(612, 0, 0, 794, 0, 0);
        element = await builder.createImageFromMatrix(img, matrix);
        writer.writePlacedElement(element);
        writer.end();
        doc.pagePushBack(page);

        // Add a JPEG200 to output file
        page = await doc.pageCreate(pageRect);
        writer.beginOnPage(page, 1, true, true);

        img = await PDFNet.Image.createFromURL(doc, inputURL + 'palm.jp2');
        matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 96, 80);
        element = await builder.createImageFromMatrix(img, matrix);
        writer.writePlacedElement(element);

        // write 'JPEG2000 Sample' text under image
        const timesFont = await PDFNet.Font.create(doc, PDFNet.Font.StandardType1Font.e_times_roman);
        writer.writeElement(await builder.createTextBeginWithFont(timesFont, 32));
        element = await builder.createTextRun('JPEG2000 Sample', timesFont, 32);
        matrix = await PDFNet.Matrix2D.create(1, 0, 0, 1, 190, 30);
        element.setTextMatrix(matrix); // await?
        writer.writeElement(element);
        const element2 = await builder.createTextEnd();
        writer.writeElement(element2);

        writer.end();
        doc.pagePushBack(page); // add the page to the document

        const docbuf = await doc.saveMemoryBuffer(PDFNet.SDFDoc.SaveOptions.e_linearized);
        exports.saveBufferAsPDFDoc(docbuf, 'addimage.pdf');

        console.log('Done. Result saved in addimage.pdf...');
      } catch (err) {
        console.log(err);
      }
    };
    // add your own license key as the second parameter, e.g. PDFNet.runWithCleanup(main, 'visitor.claims.wvKey || "YOUR_LICENSE_KEY"')
    PDFNet.runWithCleanup(main);
  };
})(window);
// eslint-disable-next-line spaced-comment
//# sourceURL=AddImageTest.js
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.apryse.com/web/get-started/samples/addimagetest.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.