How to load a HTML file into canvas?_问答_开发者

开发者 https://www.devze.com 2023-01-08 07:30 出处：网络

I know we can load an image into a canva开发者_JAVA技巧s but I wonder if we are able to load a simple HTML file into a canvas.If yes, how?

相关专题：canvas

I know we can load an image into a canva开发者_JAVA技巧s but I wonder if we are able to load a simple HTML file into a canvas. If yes, how?

Thanks.

Short answer: No, you cannot.

Long answer: Not reliably, BUT yes you can in certain (possibly hackish) ways. The key is in what you define as an "image". You are aware that you can add an image to the canvas with drawImage() - what you mightn't be aware of is what that "image" can be (not necessarily an actual image).

Firstly, the "image" can be a HTML5 video element - so you can add videos to the canvas. Secondly, in most modern browsers the "image" can be an SVG document, which can contain HTML via the SVG <foreignObject> element.

Browser support:

SVG documents in drawImage() are not currently supported in Firefox. The related bug is here and I think a fix is planned.
<foreignObject> is buggy in most browsers - Firefox (ironically) seems to have the best support.

Example:

<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>

Try loading that file with canvas drawImage() in Opera - as you'll see its interactivity is fairly buggy, but it displays fine.

He's talking about HTML5 / Javascript.

It's not possible without writing your own Rendering Engine (in Javascript).

html2canvas or rasterizeHTML.js seem the tools you are looking for.

A third solution without plugins is presented by Mozilla, but I could not get it running here: Although it's not trivial (for security reasons), it's possible to draw DOM content—such as HTML—into a canvas.

There is also PhantomJS, which supports Screen Capturing