是否可以仅打印画布元素？

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

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

更新：

的答案是如此简单。我正在考虑更复杂的解决方案。

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



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

来源

2008-10-05 bruceatk

你可以尝试这样的事：

@media print { 
    * { 
    display:none; 
    } 

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

我不知道，如果一个画布是块默认，但你可以尝试一些东西，看看它是否有效。这个想法是，只要规则的优先级更高（这就是我使用ID选择器的原因），它将隐藏打印介质的所有内容（*），除了某些其他任意元素。

编辑：如果CSS3（特别是negation pseudo-class）有更多的支持，您的规则可能是如此简单：

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

但是，这可能会导致<HTML>和<身体>标签被隐藏，从而有效地隐藏你的画布，以及...

来源

2008-10-05 18:10:58

我知道Safari支持：不是（），如果Opera不支持，我会惊呆了，我相信Firefox支持它（我不知道关于Firefox 3.0） - 而且它们是支持Canvas的浏览器元素，应该是足够的：D – olliej 2008-10-06 04:22:15

我不知道该支持的100％，但您可以使用CSS，把一个属性在<link>标记为media="print"。在这个CSS文件，只是隐藏的元素，你不想展示，同时打印：display:none;

来源

2008-10-05 18:10:34

你可以尝试创建一个画布只是打印：

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(); 
}

来源

2012-11-23 15:19:20 Dedan

是否可以仅打印画布元素？

回答

相关问题