Adding a stamp to PDFs using Javascript

1WebViewer({
2  initialDoc: 'https://url/to/my_file.docx',
3  // ...
4}, viewerElement)
5  .then(instance => {
6    const { documentViewer } = instance.Core;
7    const path = '/samples/full-apis/TestFiles/butterfly.png'
8
9    // Promise resolves with options object
10    const promise = new Promise(resolve => {
11      const img = new Image();
12      const options = {
13        custom: async (ctx, pageIndex, pageWidth, pageHeight) => {
14
15          ctx.font = '50px serif';
16          ctx.fillText('Hello world', 50, 90);
17
18          ctx.drawImage(
19            img,
20            pageWidth / 2 - img.width / 2,
21            pageHeight / 2 - img.height / 2
22          );
23
24          // the pageIndex is also passed in so you could have
25          // a different watermark for each page
26        }
27      };
28      img.onload = () => { 
29        return resolve(options);
30      };
31      img.src = path;
32    });
33
34    documentViewer.setWatermark(promise);
35  });

1let imageName = 'path to your image file';
2let fileName = 'path to your PDF file';
3
4WebViewer({
5  fullAPI: true,
6  // other constructor options
7}, viewerElement).then(instance => {
8  const { documentViewer, PDFNet } = instance.Core;
9
10  document.getElementById('myBtn').addEventListener('click', async () => {
11    await PDFNet.initialize();
12    const doc = await documentViewer.getDocument().getPDFDoc();
13
14    // Run PDFNet methods with memory management
15    await PDFNet.runWithCleanup(async () => {
16
17      // lock the document before a write operation
18      // runWithCleanup will auto unlock when complete
19      doc.lock();
20      const s = await PDFNet.Stamper.create(PDFNet.Stamper.SizeType.e_relative_scale, 0.5, 0.5);
21
22      // Specifies if the stamp is to be stamped as an annotation.
23      // note that stamps created with this setting do not work with SetAsBackground, HasStamps, and DeleteStamps, if annotation is true.
24      //s.setAsAnnotation(true); 
25
26      await s.setAlignment(PDFNet.Stamper.HorizontalAlignment.e_horizontal_center, PDFNet.Stamper.VerticalAlignment.e_vertical_top);
27      const font = await PDFNet.Font.create(doc, PDFNet.Font.StandardType1Font.e_courier);
28      await s.setFont(font);
29      const redColorPt = await PDFNet.ColorPt.init(1, 0, 0, 0);
30      await s.setFontColor(redColorPt);
31      await s.setTextAlignment(PDFNet.Stamper.TextAlignment.e_align_right);
32      await s.setAsBackground(false);
33      const pgSet = await PDFNet.PageSet.createRange(1, 2);
34      await s.stampText(doc, 'This is a title!', pgSet);
35
36      const img = await PDFNet.Image.createFromURL(doc, imageName);
37      s.setAsBackground(false);
38      const pgSetImage = await PDFNet.PageSet.createRange(1, 1);
39      await s.setAlignment(PDFNet.Stamper.HorizontalAlignment.e_horizontal_right, PDFNet.Stamper.VerticalAlignment.e_vertical_bottom);
40      await s.stampImage(doc, img, pgSetImage);
41
42      const srcDoc = await PDFNet.PDFDoc.createFromURL(fileName);
43      const srcPage = await srcDoc.getPage(1);
44      await s.setAlignment(PDFNet.Stamper.HorizontalAlignment.e_horizontal_left, PDFNet.Stamper.VerticalAlignment.e_vertical_bottom);
45      await s.stampPage(doc, srcPage, pgSet);
46    });
47
48    // clear the cache (rendered) data with the newly updated document
49    documentViewer.refreshAll();
50
51    // Update viewer to render with the new document
52    documentViewer.updateView();
53
54    // Refresh searchable and selectable text data with the new document
55    documentViewer.getDocument().refreshTextData();
56  });
57})