一些注意事项：
a) 不是整个页面，
b）不是来自服务器端。
c) 渲染或“处理”的 HTML，例如
<table>
<tr><td width="5%"> <td>fact 1 </td> fact 2 </td> </tr>
</table>
期望的结果（对于 PNG）：
不是 事实 1 事实 2 事实 3 事实 4 ...
“标志”nbsp; 可用于创建空白区域，但需要再次渲染。
可能是一些 javascript 首先充当 ua（浏览器）以首先获取呈现的数据，然后 然后将其转换为PNG支持的bmp格式...如何？代码示例将不胜感激。
非常感谢。
【问题讨论】：
在服务器端生成它有什么问题？
编辑： 只使用 html+css 有什么问题？对于用户来说，它看起来相同，打印相同，并且更快、可搜索和可访问，并且您可以使用 Javascript 轻松操作它。我不明白你为什么要首先拥有这些图像。
此问题的简短回答与other post 中的相同：不，您不能。 您必须克服许多问题，包括但不限于：
您需要将 HTML 正确地呈现为位图。这比看起来要困难得多。
使用 PNG 压缩图像并非易事，虽然使用 JS 在技术上可以做到这一点，但这绝对是一个非常糟糕的主意。
即使你设法解决了这些问题，你最终也会得到几乎没有机会跨浏览器工作的 hacky 和极其脆弱的代码。
这样做就像需要一些 混凝土和开发月球火箭 收获月球尘埃来制造它 而不是在家得宝买一些。
- ceejayoz， 在 similar 主题上
不过，您可能想看看 alternatives（SVG、Canvas、服务器端生成……）。
编辑 2： Here's an example 直接从 HTML 文件加载的图像
我使用 PHP 对这些图像进行 base64_encode。这是来源：
<script type="text/javascript">
var i = 0;
var imgs = [];
<?php
$imgArray = array('angry.gif', 'pray.gif', 'think.gif');
$imgs = array_map(function ($d) {return base64_encode(file_get_contents($d));}, $imgArray);
$i=0;
foreach ($imgs as $img) {
echo 'imgs[' . $i++ . '] = "' . $img . "\";\n";
}
?>
function changeImg() {
i = (i+1) % imgs.length;
var img = document.getElementById('theImage');
img.src = 'data:image/gif;base64,' + imgs[i];
}
</script>
<body onload="changeImg()">
<input type="button" onclick="changeImg();" value="Change Image" /><br /><br />
<img src="" id="theImage" alt="" />
【讨论】：