html - 如何在从 jsPDF 生成的 PDF 中添加水印？

Question

我正在从 canva 生成 PDF 并使用 jsPDF 生成它。

https://github.com/MrRio/jsPDF

这是我正在使用的代码，我想在页面中添加水印。 任何人都可以帮助我吗？

 self.downloadCanvasObjectAsPDF = function () {
        canvas.deactivateAll().renderAll();

        try {
            canvas.getContext('2d');
            var imgData = canvas.toDataURL("image/jpeg", 1.0);
            var pdf = new jsPDF('p', 'mm', [297, 210]);
            pdf.addImage(imgData, 'JPEG', 5, 5);
            var namefile = 'export';
            if(namefile != null) {
                pdf.save(namefile + ".pdf");
                return true;
            }else{
                return false;
            }
        } catch(e) {
            alert("Error description: " + e.message);
        }
    };

Answer 1

您可以先在每个页面手动添加水印，无论是图像还是文本，然后添加内容，使其不会相互重叠。

在这种方法中，您也可以在添加每个新页面时添加/调用水印。 doc.addPage();

(或)

在 PDF 生成结束时，您可以调用一个为所有页面添加水印的函数。

假设我想在 PDF 生成后为所有页面添加水印。

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;
}

在保存 PDF 之前调用这个函数

function getPdf() {

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

//Add content

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

  doc.save('test');

}

这里提琴供引用:https://jsfiddle.net/Purushoth/f55h4hzs/