是否可以只打印画布元素？答案

【问题标题】：Is it possible to print just the canvas element?是否可以只打印画布元素？
【发布时间】：2010-09-15 09:37:49
【问题描述】：

我创建了一个网页，可让您输入一些信息，然后根据该信息在画布元素中绘制图像。除了打印之外，我几乎可以按照我想要的方式工作。

有没有办法打印出画布元素或创建一个新窗口来绘制，这是唯一的方法吗？

更新：

答案很简单。我在想一个更复杂的解决方案。

我希望我可以选择超过 1 个答案。当我使用 * 禁用显示时，我无法打印画布。最简单的解决方案是关闭我用于输入的表单，在@media print{} 内的 CSS 中使用表单 {display:none;}。感谢您的快速响应。



    @media print {
           form {
         display:none;
       }
    }

【问题讨论】：

标签： javascript printing canvas

【解决方案1】：

你可以试试这样的：

@media print {
  * {
    display:none;
  }

  #SOME-CANVAS-ID {
    display:block;
  }
}

我不确定画布是否默认是块状的，但您可以尝试一些类似的东西，看看它是否有效。这个想法是它会隐藏打印媒体的所有内容 (*)，除了一些其他任意元素，只要规则的优先级更高（这就是我使用 ID 选择器的原因）。

编辑：如果 CSS3（特别是 negation pseudo-class）有更多的支持，你的规则可以这么简单：

*:not(canvas) {
  display:none;
}

但是，这可能会导致和

标签被隐藏，从而有效地隐藏您的画布......

【讨论】：

我知道 Safari 支持 :not()，如果 Opera 不支持，我会感到震惊，而且我相信 firefox trunk 支持它（我不知道 Firefox 3.0）——而且他们是实际支持 Canvas 元素的浏览器应该足够了：D
css3.info/selectors-test/test.html 声称所有 3 都支持 not - 所以如果你使用画布， :not() 很好。

【解决方案2】：

我不能 100% 确定是否支持，但您可以使用 CSS 并在 <link> 标记中为 media="print" 添加一个属性。在这个 CSS 文件中，只需隐藏您不想在打印时显示的元素：display:none;

【讨论】：

【解决方案3】：

您可以尝试创建一个仅用于打印的画布：

this.Print = function () {
    var printCanvas = $('#printCanvas');
    printCanvas.attr("width", mainCanvas.width);
    printCanvas.attr("height", mainCanvas.height);
    var printCanvasContext = printCanvas.get(0).getContext('2d');
    window.print();
}

【讨论】：