如何将 HTML 画布转换为真实图片？

Question

我正在尝试将客户端临时和本地的 HTML 内容转换为真实图片。我做了我的研究canvas2base64canvas2base64html2base64，但没有生成真实的图片，它始终是基于base64代码的“图像”。

它做我想做的事。它会生成我想要的质量的图片。但问题是，我想用 jsPDF 将此图像放入 PDF，当图像是 base64 代码时，它无法将其放入 PDF。

我正在使用以下所有脚本：jquery.js、jspdf.js、html2canvas.js 和 FileSaver.js

有没有办法从画布中临时生成像 *.png 或 *.jpg 这样的真实图像，它不是基于 base64 代码并保存在用户的 localStorage 中？所以我可以引用它并在我的代码中使用它？

下面的代码应该会生成图像，然后将图像放入 DIN A4 大小的 PDF 中。

function print() {
			//const filename  = 'Loveletter_.pdf';
			
			html2canvas(document.querySelector('.finishedLetter')).then(function(canvas) {
				var pdf = new jsPDF('p', 'mm', 'a4');
				$("#test_me").attr("src", canvas.toDataURL("image/png", 1.0));
				var ImgForPDF = document.getElementById('test_me').getAttribute('src');
				pdf.addImage(ImgForPDF, 'PNG', 0, 0, 211, 298);
			});
			pdf.save('Loveletter_.pdf');
		}

Answer 1

感谢您的确认。请尝试这种方法，它不会妨碍您的 css 属性并为您提供可打印的 PDF 文件：

function print() {


// Generating PDF using HTML2Canvas
  html2canvas(document.body,{
    useCORS: true, 
    onrendered:function(canvas){
      var img=canvas.toDataURL("image/png");
      var imgData = canvas.toDataURL('image/png');
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save('myDoc.pdf');
    }
  });

}

Answer 2

很高兴听到该解决方案适合您。请投票解决您的问题的答案。为了解决您的最新问题，如果您只想在 PDF 中捕获一些特定的 div，您可以使用以下技术：

 $(document).on('click', '#download_button', function(){

  // Settings before generating PDF
  $('header').hide();
  $('footer').hide();

  // Generating PDF using HTML2Canvas

  html2canvas(document.body,{
   //Your code
  });

  // Reset properties which was updated before PDF generation
  $('header').show();
  $('footer').show();

});