使用javascript打印画布图像答案

【问题标题】：Print images of canvas using javascript使用javascript打印画布图像
【发布时间】：2017-08-13 20:32:41
【问题描述】：

我在打印 canvas elements 时遇到了一点问题，使用 onClick 和 javascript function 在同一个打印作业的两页上打印 canvas elements。

现在我正在使用jsPDF 创建可下载的 PDF 供用户保存。这正在按预期工作。

我还想创建一个打印功能，将每个canvas 打印为一页。

使用jsPDF 中的autoprint 功能看起来是一个显而易见的答案，但不幸的是，我只能吐出以纵向格式卡在同一页面上的canvas 页面。我想以横向打印这些canvaselements，每个打印在它自己的页面上，但在同一个打印作业中。

我已经查看了其他用于打印图像的javascript 解决方案，但这些都假定图像的外部来源。我需要这样的解决方案，只指向我已经创建的toDataURL()。

我确信这个问题之前已经在某个地方得到了回答，但到目前为止我还不能正确地将它拼凑在一起。

这是我为 jsPDF 拼凑的内容，它会吐出上面列出的我不想要的纵向格式。

function print() {
    ctx1.drawImage(c2,0,0); 
    ctx1.drawImage(c3,0,0); 
    var imgData1 = planner1.toDataURL(); 
    var imgData2 = planner2.toDataURL(); 
    var pdf = new jsPDF('l', 'pt', 'letter');
    pdf.addImage(imgData1, 'PNG', 0, 0, 0, 0, 'IMG1', 'fast');
    pdf.addPage();
    pdf.addImage(imgData2, 'PNG', 0, 0, 0, 0, 'IMG2', 'fast');
    pdf.autoPrint();
}‌‌‌‌‌‌

如果有人知道如何操作 autoPrint() 以支持不同的大小和格式，我很想听听，因为 jsPDF 文档有点欠缺。

否则，我会创建两个字母大小的 png 图像，它们可以在与其他选项相同的打印作业中打印。

我将永远感激这方面的任何帮助。

【问题讨论】：

标签： javascript html canvas printing

【解决方案1】：

好吧，jsPDF 无法完成，所以我选择了png 路线。不完全是最优雅的解决方案（宁愿不必打开另一个窗口然后关闭它），但它打印的正是我想要的......

<script>
function print() {

  ctx1.drawImage(c2,0,0);
  ctx1.drawImage(c3,0,0);

  var win = window.open();
  win.document.write("<img src='"+planner1.toDataURL()+"'/><img src='"+planner2.toDataURL()+"'/>");
  win.print();
  win.window.close();

  window.location.href = '../php/planner.php?pln=<?php echo $user ?>';
}
</script>

我还添加了一些css 以确保不打印页眉和页脚。

【讨论】：