我知道我们可以将图片加载到画布中，但我想知道是否能够将简单的HTML文件加载到画布中。如果可以，如何操作？
谢谢。
3个回答
5
简短回答：不行。
详细回答：不能可靠地实现，但在某些（可能是hackish的）方式下可以。关键在于您如何定义“图像”。您知道可以使用drawImage()将图像添加到画布中 - 您可能不知道的是该“图像”可以是什么（不一定是实际的图像）。
首先，“图像”可以是HTML5视频元素 - 因此您可以向画布添加视频。
其次，在大多数现代浏览器中，“图像”可以是SVG文档，其中可以通过SVG <foreignObject>元素包含HTML。
浏览器支持：
- Firefox目前不支持
drawImage()中的SVG文档。相关错误在这里，我认为计划修复。 <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中使用canvas的drawImage()加载该文件 - 您会发现它的交互性相当有问题，但显示效果很好。
- lucideer
3
// 浏览器 = Firefox v3.66; 操作系统 = 糟糕的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);
}img.src = 'element1.html';// 结果
HTML文件未加载到画布中。 - Don Don
嘿 Don Don - 正如我在答案的第一行所说的“不可靠”- 我不建议在任何生产站点上这样做，只是告诉您这种可能性。 - lucideer
你能看一下另一个相关的问题吗？
http://stackoverflow.com/questions/3276131/how-to-convert-a-block-of-rendered-html-code-or-a-div-into-a-png谢谢。Don - Don Don
1
html2canvas或rasterizeHTML.js似乎是您正在寻找的工具。
第三种无需插件的解决方案由Mozilla提供，但我在这里无法运行它：虽然这不是微不足道的（出于安全原因），但可以将DOM内容（如HTML）绘制到画布中。
- koppor
1
他正在谈论HTML5 / Javascript。
如果不编写自己的渲染引擎（用Javascript编写），则不可能实现。
- Raphael R.
1
@Mewp，关于HTML、JavaScript和HTML5画布。 - Don Don
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接