Question

一些注意事项：
a）不是整页，
b）不是从服务器端。
c）渲染或“处理”HTML，例如，
<table> <tr><td width="5%"> <td>fact 1 </td> fact 2 </td> </tr> </table>



desired results (for the PNG): 


  fact 1    fact 2

fact 3    fact 4  
...

not fact 1 fact 2 fact 3 fact 4 ...

＆lt; code＆gt; “符号” NBSP; ＆LT; /代码＆GT;可用于创建空白区域，但需要再次渲染。

可能是一些首先使用ua（浏览器）来获取渲染数据的javascript和然后将其转换为PNG支持的bmp格式......怎么样？代码示例将非常感激。

非常感谢。

Answer 1

在服务器端生成它有什么问题？

编辑：使用html + css有什么问题？对于用户来说，它看起来是一样的，打印相同的，它更快，可搜索和可访问，您可以使用Javascript轻松操作它。我不明白为什么你想要首先拥有这些图像。

这个问题的简短回答与other post相同：不，你不能。 您必须克服许多问题，包括但不限于：

您需要将HTML正确呈现为位图。这比看起来要困难得多。
使用PNG压缩图像并非易事，虽然技术上可以用JS做到这一点，但这绝对是一个非常糟糕的主意。

即使你以某种方式设法解决这些问题，你最终也会得到hacky和极其脆弱的代码，几乎没有机会跨浏览器工作。

这样做需要一些混凝土和开发月球火箭收获月球尘埃来制作它而不是在Home Depot买一些。

在similar主题

上

- ceejayoz，

然而，您可能需要查看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="" />

如何将呈现的HTML代码块或div转换为PNG？

1 个答案: