如何使用javascript打印方法打印画布元素？

如何打印已创建的画布元素，该元素上使用javascript绘制了一些内容？我的打印预览显示一个空白框，而不是画布元素中的内容

首先，我使用html2canvas创建画布图像，然后我看到该图像被创建。但我无法打印包含相关图像的div

在IE中，当按钮被触发两次时，我可以看到它。第一次单击打开空白打印预览，第二次单击打开相关内容。但是在chrome中，它会立即打开空白内容，不能加载第二个触发器；页面冻结

这是我的密码

function printDiv(index) {
var canvasImg = "";
var divToPrint = document.getElementById('hr'+index);
html2canvas(divToPrint, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#seckinCanvas').html('<img src="'+canvasImg+'" alt="">');
}
});

var printContent = document.getElementById("seckinCanvas");
var windowUrl = '';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName,'left=500,top=500,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}

函数printDiv（索引）{
var canvasImg=“”；
var divToPrint=document.getElementById（'hr'+索引）；
html2canvas（divToPrint{
onrendered：函数（画布）{
var canvasImg=canvas.toDataURL（“image/jpg”）；
$（'#seckinCanvas'）.html（''）；
}
});
var printContent=document.getElementById（“seckinCanvas”）；
var windowUrl=''；
var uniqueName=新日期（）；
var windowName='Print'+uniqueName.getTime（）；
var printWindow=window.open（windowUrl，windowName，'left=500，top=500，width=0，height=0'）；
printWindow.document.write（printContent.innerHTML）；
printWindow.document.close（）；
printWindow.focus（）；
printWindow.print（）；
printWindow.close（）；
}

以下是对我有效的方法（无需JS）：

在HTML中包括打印按钮：

打印

将此添加到CSS中：

@媒体打印{
//使所有非画布内容（div和stuff）消失：
.notCanvas、.alsoNotCanvas、{
显示：无；
}
//将画布居中（可选）：
帆布{
填充：0；
保证金：自动；
显示：块；
位置：绝对位置；
宽度：800px；
高度：800px；
排名：0；
底部：0；
左：0；
右：0；
}
}

这使您可以只打印画布

---

我没有跨浏览器测试这个，但它肯定在Chrome中工作

请在评论printWindow.close（）后重试；chrome出现了一些问题。我已经尝试过了，但没有任何改变。据介绍，这应该是跨浏览器支持的。另外，如果您想隐藏除少数元素以外的所有元素，可以使用

：not（）

伪类：

：not（.canvas\u元素）：not（.element\u应该保持可见）{display:none；}

我需要一个JS解决方案

<a id="btn-print" onclick="print()">Print</a>
@media print {
  // Make all your non-canvas things (divs and stuff) disappear:
  .notCanvas, .alsoNotCanvas, ... {
    display: none;
  }
  // Center your canvas (optional):
  canvas {
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    width: 800px;
    height: 800px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}