如何在纸上打印 html 画布答案

【问题标题】：How to print html canvas onto paper如何在纸上打印 html 画布
【发布时间】：2016-11-15 09:32:19
【问题描述】：

我创建了一个基于 HTML 的网页，其中包含一个 form、一些 texts 和一个 canvas。我正在尝试在一张纸上打印包含画布的页面。但问题是 - 画布无法打印。我还使用toDataURL()方法在打印前将canvas转换为图像，但还是不行。谁能给我一些线索？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillRect(0, 0, 150, 100);
var img = c.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

function printData(){
 var divToPrint=document.getElementById("printTable");
 newWin= window.open("");
 newWin.document.write(divToPrint.outerHTML);
 newWin.print();
 newWin.close();
}

$('#printButton').on('click',function(){
printData();
});

<canvas id="myCanvas"></canvas>
<table id="printTable">
<button type="button" id="printButton" class="btn btn-info"> Print </i></button>
<tr><td>Data1 : </td><td >HTML</td></tr>
<tr><td>Data2 : </td><td >CSS</td></tr>
<tr><td>Image : </td><td >Wanna print the image here.</td></tr>

【问题讨论】：

Quick Print HTML5 Canvas的可能重复
这里使用 JS 选择器和 Jquery 选择器。你包括 jquery 吗？尝试只使用其中一种。
在您调用 toDataURL 时是否在您的画布上绘制了任何内容？

标签： javascript html canvas

【解决方案1】：

您可以做的是在其他询问的页面上尝试其他一些很好回答的解决方案，这与您尝试归档的内容非常相似。

尝试在这里检查： Capture HTML Canvas as gif/jpg/png/pdf?

【讨论】：

... 和现代浏览器（Chrome、FF 和 Edge）都允许您右键单击将画布保存为桌面图像。然后用户可以右键单击打印该图像。