如何将 HTML 文件加载到画布中？答案

【问题标题】：How to load a HTML file into canvas?如何将 HTML 文件加载到画布中？
【发布时间】：2011-03-17 15:17:38
【问题描述】：

我知道我们可以将图像加载到画布中，但我想知道我们是否能够将简单的 HTML 文件加载到画布中。如果是，怎么做？

谢谢。

【问题讨论】：

什么画布？您使用什么语言？
为了获得答案，请尝试添加更多信息。例如编程语言...
@Mewp @AdrianFaciu 99% 的可能性是他在谈论 HTML5 画布和 JavaScript。

【解决方案1】：

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

【讨论】：

【解决方案2】：

简短回答：不，你不能。

长答案： 不可靠，但是是的，您可以通过某些（可能是骇人听闻的）方式。关键在于您将其定义为“图像”。您知道您可以使用 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>

尝试在 Opera 中使用画布 drawImage() 加载该文件 - 你会发现它的交互性相当有问题，但显示效果很好。

【讨论】：

// 浏览器 = Firefox v3.66; os = crappy Vista // 我们必须支持 FF var canvas= document.getElementById('oneElement'); var ctx= canvas.getContext('2d'); var img=新图像（）； ctx.drawImage(img, 0, 0, img.width, img.height); } img.src = 'element1.html'; // 结果 html 文件尚未加载到画布中
Hey Don Don - 正如我在答案“不可靠”的第一行中所说的那样 - 我不建议在任何生产站点执行此操作，只是通知您这种可能性。
好的。你能看看另一个相关的问题吗？ stackoverflow.com/questions/3276131/… 谢谢。唐

【解决方案3】：

他在谈论 HTML5 / Javascript。

如果不编写自己的渲染引擎（使用 Javascript），这是不可能的。

【讨论】：

@Mewp、HTNL 和 javascript 以及 HTML5 画布。