如何將HTML文件加載到畫布中？

我知道我們可以將圖像加載到畫布中，但是我想知道我們是否可以將簡單的HTML文件加載到畫布中。如果是，如何？如何將HTML文件加載到畫布中？

謝謝。

來源

2010-07-18 Don Don

什麼印刷品嗎？你在用什麼語言？ – Mewp 2010-07-18 17:56:15

爲了得到答案，嘗試添加更多信息。例如，編程語言...... – 2010-07-18 17:56:45

@Mewp @AdrianFaciu使用JavaScript來討論HTML5畫布的可能性高達99％。 – mwcz 2011-05-26 16:01:04

他在談論HTML5/Javascript。

如果不編寫自己的渲染引擎（使用Javascript），這是不可能的。

來源

2010-07-18 17:59:07

@Mewp， HTNL和JavaScript和HTML5畫布。 – 2010-07-18 19:47:51

簡答：不，你不能。

長答案： 不可靠，但是，你可以在某些（可能是hackish）的方式。關鍵在於你定義的「圖像」。您知道，您可以使用drawImage()將圖像添加到畫布上 - 您可能沒有意識到的是「圖像」可能是什麼（不一定是實際圖像）。首先，「圖片」可以是HTML5視頻元素 - 因此您可以將視頻添加到畫布。其次，在大多數現代瀏覽器中，「圖像」可以是SVG文檔，其可以通過SVG <foreignObject>元素包含HTML。

瀏覽器支持：在drawImage()

SVG文件目前不支持在Firefox。 related bug is here和我認爲一個修復計劃。
<foreignObject>在大多數瀏覽器中都有問題 - Firefox（具有諷刺意味的是）似乎有最好的支持。

例子：

<svg xmlns="http://www.w3.org/2000/svg"> 
<foreignObject x="0" y="0" height="800" width="800"> 
    <body xmlns="http://www.w3.org/1999/xhtml"> 
    <p>Hello world!</p> 
    <input type="date"/> 
    </body> 
</foreignObject> 
</svg>

試裝即用帆布drawImage()在Opera文件 - 你會看到它的交互性是相當馬車，但它顯示的罰款。

來源

2010-07-18 18:14:29 lucideer

// browser = Firefox v3.66; os = crappy Vista //我們必須支持FF var canvas = document.getElementById（'oneElement'）; var ctx = canvas.getContext（'2d'）; var img = new Image（）; ctx.drawImage（img，0，0，img.width，img.height）; \t} \t img.src ='element1。HTML「; //結果 html文件沒有被加載到畫布 – 2010-07-18 19:43:23

嘿唐唐 - 正如我在答案的第一行中說的「不可靠」 - 我不會推薦在任何生產站點執行此操作，只是通知您可能性。 – lucideer 2010-07-18 20:01:08

好的。你能看看另一個相關的問題嗎？ http://stackoverflow.com/questions/3276131/how-to-convert-a-block-of-rendered-html-code-or-a-div-into-a-png 謝謝。 Don – 2010-07-18 20:58:16

html2canvas或rasterizeHTML.js似乎是您正在尋找的工具。

無插件第三個方案是由Mozilla提出的，但我不能讓它運行在這裏：Although it's not trivial (for security reasons), it's possible to draw DOM content—such as HTML—into a canvas.

還有PhantomJS，支持Screen Capturing

來源

2013-06-04 07:19:33 koppor

如何將HTML文件加載到畫布中？

回答

相關問題