是否可以僅打印畫布元素？

我創建了一個網頁，可以讓您輸入一些信息，然後根據該信息在畫布元素中繪製圖像。除了印刷之外，我幾乎都以我想要的方式工作。是否可以僅打印畫布元素？

有沒有辦法打印出畫布元素或創建一個新的窗口來繪製，唯一的方法呢？

更新：

的答案是如此簡單。我正在考慮更復雜的解決方案。

我希望我可以選擇超過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

是否可以僅打印畫布元素？

回答

相關問題