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

Question

我正在尝试将客户端临时本地的 HTML 内容转换为真实图片。我做了研究 canvas2base64canvas2base64html2base64，但没有任何地方生成真实图片，它总是基于 base64 代码的 "image"。

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

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

有没有办法从 canvas 中临时生成像 *.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();

});

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

How do I convert a HTML canvas into a REAL picture?

html

javascript

css

jquery

jspdf