如何使用JSPDF在pdf中添加水印？

如何解决如何使用JSPDF在pdf中添加水印？

我正在使用 JSPDF 库来创建 PDF。现在我想在PDF的每一页中添加水印。

        var formData = new FormData();
        var length = $("#tbiGeneratePDF .canvas-container").length;
        console.log('Canvas length => '+length);
        var watermark = 'http://localhost/project/img/watermark.jpg';
        if(length >0){
          //$("#tbiGeneratePDF canvas").each(function(index,value){
            $("#tbiGeneratePDF .canvas-container").each(function(index,value){
              //console.log('Here we go...'+index);
              html2canvas($("#canvas_"+index),{
                  onrendered: function(canvas) {
                      var imgData = canvas.toDataURL('image/png',1.0);                        
                      //console.log(index+'=='+ length);
                      const imgProps= doc.getimageProperties(imgData);
                      const pdfWidth = doc.internal.pageSize.getWidth();
                      const pdfheight = (imgProps.height * pdfWidth) / imgProps.width;
                      //console.log('imgData height '+JSON.stringify(imgProps)+' w '+pdfWidth+' h '+pdfheight);                        

                      doc.addImage(imgData,'PNG',pdfWidth+3,pdfheight,'page_'+index,'FAST');  // imageData,format,x,y,width,height,alias,compression,rotation
                      //doc.addImage(imgData,240,'JPEG',0);  // imageData,rotation
                      // set first image to save in directory
                      doc.setFontSize(35)
                      //doc.setTextColor(230);
                      doc.setTextColor(245,245,0.33);
                      doc.setFont("Boogaloo");
                      doc.text("project",pdfheight-60,pdfWidth-30,null,45); //text(text,optionsopt,transform)
                      
                      //doc.text(doc.internal.pageSize.width - 130,doc.internal.pageSize.height - 150,"project2",45);                          
                      if(index == 0){
                        console.log('Inside cover image');
                        formData.append('cover_image',imgData);                        
                      }
                      if(index == (length-1)){
                          //console.log('PDF => '+doc+'pdf json '+JSON.stringify(doc));
                          formData.append('pdf',doc.output('blob'));
                          formData.append('book_id',$("#bookid").val());
                          $.ajaxSetup({
                              headers: {
                                  'X-CSRF-TOKEN': $('Meta[name="csrf-token"]').attr('content')
                              }
                          });
                          //console.log('Check files '+$('#sliderImage')[0].files);
                          var base_url = window.location.origin;
                          $.ajax({
                              url: base_url+'/project/savepdf',type: 'post',data: formData,enctype: 'multipart/form-data',contentType: false,processData: false,success: function(response,textStatus,xhr){
                                  //console.log('Inside response '+xhr.status);
                                  if(response.data.pdf_name){
                                    $('#tbiGeneratePDF').remove();
                                    $(".loader-cc").fadeOut();
                                    window.location.href = base_url+'/project/flip';
                                  }else{
                                    $('#tbiGeneratePDF').remove();
                                    $(".loader-cc").fadeOut();
                                    $('#flashMessage').html('<p class="alert alert-danger">Book customization Failed due to some problem please try again.</p>');
                                    $('#flashMessage p:first').fadeOut( 3500,"linear" );
                                  }
                              },error: function (xhr,textStatus) {
                                  console.log(xhr.status+''+JSON.stringify(xhr));
                                  $('#tbiGeneratePDF').remove();
                                  $('#flashMessage').html('<p class="alert alert-danger">'+xhr.status+' errors something went wrong please try again later.</p>');
                                  $('#flashMessage p:first').fadeOut( 7500,"linear" );
                                  $(".loader-cc").fadeOut();
                              }                                    
                          });                                        
                      }else{
                          // keep adding new page unitill all pages not created
                          doc.addPage();
                      }
                  }
              });
          });
        }else{              
          $('#tbiGeneratePDF').remove();
          $(".loader-cc").fadeOut();
          $('#flashMessage').html('<p class="alert alert-danger">Could not load the pdf due to some technical error please try again later.</p>');
          $('#flashMessage p:first').fadeOut( 7500,"linear" );
        }
  }

我遇到了水印文本问题，它在 pdf 上方显示明文而不是水印。水印文本中应该有不透明度，我没有找到任何将不透明度添加到 doc.text() 即

的解决方案

                      doc.setFontSize(35)
                      //doc.setTextColor(230);
                      doc.setTextColor(245,0.33);
                      doc.setFont("Boogaloo");
                      doc.text("Watermark",transform)