How to add watermark in PDF genereted from jsPDF?

Question

I am generating PDF from canva and using jsPDF to generate it.

https://github.com/MrRio/jsPDF

Here is my code what I am using I want to add watermark into pa

Answer 1

You can add your watermark be it an image or text manually at each page first, then add your contents so that it won't overlaps each other.

In this approach you have add/call the watermark on adding each new page too. doc.addPage();

(Or)

At the end of PDF generation you could call a function that perform adding watermarks for all pages.

Let's say I want to add watermark to all my pages after PDF generation.

function addWaterMark(doc) {
  var totalPages = doc.internal.getNumberOfPages();

  for (i = 1; i <= totalPages; i++) {
    doc.setPage(i);
    //doc.addImage(imgData, 'PNG', 40, 40, 75, 75);
    doc.setTextColor(150);
    doc.text(50, doc.internal.pageSize.height - 30, 'Watermark');
  }

  return doc;
}

Call this function before saving the PDF

function getPdf() {

  var doc = new jsPDF('p', 'pt', 'a4');

//Add content

//finally call the watermark
  doc = addWaterMark(doc);

  doc.save('test');

}

Fiddle here for reference: https://jsfiddle.net/Purushoth/f55h4hzs/