如何将一段呈现的HTML代码或div转换为PNG？ [英] How to convert a block of rendered HTML code or a div into a PNG?
问题描述
一些注释：
a）不是整个页面，
b）不是来自服务器端。
例如，
< table>
c）呈现或处理
< tr>< td width =5％>< td>事实1< / td>其实2< / td> < / TR>
< / table>
预期结果（PNG）：
fact 1 fact 2
fact 3 fact 4
...
not
fact 1 fact 2
fact 3 fact 4
...
< code> 符号 NBSP; < /代码>可能会被用来创建空白区域，但它也需要被渲染。
可能有些JavaScript首先使用ua（浏览器）来获取渲染数据，而
然后将其转换为PNG支持的bmp格式...怎么样？代码示例将非常感谢。
非常感谢。
生成服务器端有什么问题？
编辑：使用html + css有什么问题？对于用户来说，它看起来是一样的，打印相同，它更快，可搜索和访问，你可以很容易地用Javascript来操作它。我不明白你为什么想把图像放在第一位。
这个问题的简短答案与其他帖子：不，您不能。
您需要克服的问题很多，包括但不限于：
-
您需要正确呈现HTML成一个位图。这比看起来要困难得多。使用PNG压缩图像并不容易，虽然在技术上可以用JS来完成，但它绝对是一个非常糟糕的主意。
/ li>
即使你设法解决了这些问题，你最终会得到几乎没有工作机会的hacky和非常脆弱的代码跨越浏览器。
这样做就像需要一些
混凝土，并开发月球火箭
来收割月球灰尘，使它
，而不是在家得宝购买一些。
- ceejayoz， on 类似 topic
然而，替代品（SVG，Canvas，服务器端代...） t想看看。
编辑2： 以下是直接从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。\; \\\
;
}
？>
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 =buttononclick =changeImg（）; value =更改图片/>< br />< br />
< img src =id =theImagealt =/>
A few notes:
a) not an entire page,
b) not from server side.
c) rendered or "treated" HTML, for instance,
<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 ...
The <code> "sign"nbsp; </code> may be used to create white space but again it needs to be rendered.
Probably some javascript that first acts a ua (browser) to get the rendered data first and then transforms it into a bmp format that PNG supports... how? code sample would be much appreciated.
Many thanks.
What's wrong with generating it server-side?
EDIT: What's wrong with just using html+css? For the user it looks the same, prints the same AND it's faster, searchable and accessible AND you can easily manipulate it with Javascript. I fail to see why you would want to have the images in the first place.
This question's short answer is the same as from the other post: No, you cannot. There are many problems you have to overcome, including but not limited to:
You would need to correctly render HTML into a bitmap. This is infinitely more difficult than it seems.
Compressing an image using PNG is not trivial, and while it's technically possible to do that with JS, it's definitely a very bad idea.
Even if you somehow manage to get around these problems, you will end up with hacky and extremely brittle code that have nearly no chance of working cross-browser.
Doing this would be like needing some concrete and developing a Moon rocket to harvest lunar dust to make it instead of buying some at Home Depot.
- ceejayoz, on a similar topic
There are however alternatives (SVG, Canvas, server-side generation, ...) you might want to look at.
EDIT 2: Here's an example of images loaded directly from the HTML file
I used PHP to base64_encode those images. Here's the source:
<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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
