Add Image to PDF

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 and PDF Editing & Manipulation Library.

This sample works with Full-API for WebViewer.

1//---------------------------------------------------------------------------------------
2// Copyright (c) 2001-2023 by Apryse Software Inc. All Rights Reserved.
3// Consult legal.txt regarding legal and license information.
4//---------------------------------------------------------------------------------------
5//---------------------------------------------------------------------------------------
6// Copyright (c) 2001-2023 by Apryse Software Inc. All Rights Reserved.
7// Consult legal.txt regarding legal and license information.
8//---------------------------------------------------------------------------------------
9
10(exports => {
11
12 exports.runAddImageTest = () => {
13 const PDFNet = exports.Core.PDFNet;
14
15 const main = async () => {
16 try {
17 // Relative path to the folder containing test files.
18 const inputURL = '../TestFiles/';
19
20 const doc = await PDFNet.PDFDoc.create();
21 doc.initSecurityHandler();
22 doc.lock();
23
24 const builder = await PDFNet.ElementBuilder.create(); // ElementBuilder, used to build new element Objects
25 // create a new page writer that allows us to add/change page elements
26 const writer = await PDFNet.ElementWriter.create(); // ElementWriter, used to write elements to the page
27 // define new page dimensions
28 const pageRect = await PDFNet.Rect.init(0, 0, 612, 794);
29 let page = await doc.pageCreate(pageRect);
30
31 writer.beginOnPage(page, PDFNet.ElementWriter.WriteMode.e_overlay);
32
33 // Adding a JPEG image to output file
34 let img = await PDFNet.Image.createFromURL(doc, inputURL + 'peppers.jpg');
35 let matrix = await PDFNet.Matrix2D.create(200, 0, 0, 250, 50, 500);
36 const matrix2 = await PDFNet.Matrix2D.createZeroMatrix();
37 await matrix2.set(200, 0, 0, 250, 50, 500);
38 let element = await builder.createImageFromMatrix(img, matrix2);
39 writer.writePlacedElement(element);
40
41 // Add a PNG to output file
42 img = await PDFNet.Image.createFromURL(doc, inputURL + 'butterfly.png');
43 matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 300, 500);
44 element = await builder.createImageFromMatrix(img, matrix);
45 writer.writePlacedElement(element);
46
47 // Add a GIF image to the output file
48 img = await PDFNet.Image.createFromURL(doc, inputURL + 'pdfnet.gif');
49 matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 50, 350);
50 element = await builder.createImageFromMatrix(img, matrix);
51 writer.writePlacedElement(element);
52
53 // Add a TIFF image to the output file
54 img = await PDFNet.Image.createFromURL(doc, inputURL + 'grayscale.tif');
55 matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 10, 50);
56 element = await builder.createImageFromMatrix(img, matrix);
57 writer.writePlacedElement(element);
58 writer.end();
59 doc.pagePushBack(page);
60
61 // Embed monochrome TIFF compressed using lossy JBIG2 filter
62 page = await doc.pageCreate(pageRect);
63 writer.beginOnPage(page, 1, true, true);
64
65 const hintSet = await PDFNet.ObjSet.create();
66 const enc = await hintSet.createArray();
67 await enc.pushBackName('JBIG2');
68 await enc.pushBackName('Lossy');
69
70 img = await PDFNet.Image.createFromURL(doc, inputURL + 'multipage.tif', enc);
71 matrix = await PDFNet.Matrix2D.create(612, 0, 0, 794, 0, 0);
72 element = await builder.createImageFromMatrix(img, matrix);
73 writer.writePlacedElement(element);
74 writer.end();
75 doc.pagePushBack(page);
76
77 // Add a JPEG200 to output file
78 page = await doc.pageCreate(pageRect);
79 writer.beginOnPage(page, 1, true, true);
80
81 img = await PDFNet.Image.createFromURL(doc, inputURL + 'palm.jp2');
82 matrix = await PDFNet.Matrix2D.create(await img.getImageWidth(), 0, 0, await img.getImageHeight(), 96, 80);
83 element = await builder.createImageFromMatrix(img, matrix);
84 writer.writePlacedElement(element);
85
86 // write 'JPEG2000 Sample' text under image
87 const timesFont = await PDFNet.Font.create(doc, PDFNet.Font.StandardType1Font.e_times_roman);
88 writer.writeElement(await builder.createTextBeginWithFont(timesFont, 32));
89 element = await builder.createTextRun('JPEG2000 Sample', timesFont, 32);
90 matrix = await PDFNet.Matrix2D.create(1, 0, 0, 1, 190, 30);
91 element.setTextMatrix(matrix); // await?
92 writer.writeElement(element);
93 const element2 = await builder.createTextEnd();
94 writer.writeElement(element2);
95
96 writer.end();
97 doc.pagePushBack(page); // add the page to the document
98
99 const docbuf = await doc.saveMemoryBuffer(PDFNet.SDFDoc.SaveOptions.e_linearized);
100 exports.saveBufferAsPDFDoc(docbuf, 'addimage.pdf');
101
102 console.log('Done. Result saved in addimage.pdf...');
103 } catch (err) {
104 console.log(err);
105 }
106 };
107 // add your own license key as the second parameter, e.g. PDFNet.runWithCleanup(main, 'YOUR_LICENSE_KEY')
108 PDFNet.runWithCleanup(main);
109 };
110})(window);
111// eslint-disable-next-line spaced-comment
112//# sourceURL=AddImageTest.js

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales