将HTML元素渲染为PNG图像？

Question

有没有更好的方法将呈现的HTML元素转换为可缩放且不像素化的PNG图像？

设计目标是在HTML + CSS中呈现页面(简单,允许用户将文本复制/粘贴为数据表等),但是将小部件复制/保存为图像以复制到PowerPoint等.出于其他原因,它是在RIA中做客户端非常有帮助.

这没关系,使用html2canvas将元素渲染到画布,将其转换为PNG,然后在对话框中显示它,用户可以右键单击以保存或复制到剪贴板(JSFiddle at http://jsfiddle.net/8ypxW/3/):

     html2canvas($("#widget"), {
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
        }
    });

唯一的挑战是图像明显模糊/像素化,特别是在Mac Retina上,并且不提供像PNG图像那样的可扩展文本.

我怀疑画布周围没有好办法,画布是基于像素的,但之前是错误的.jQuery或其他库没关系.现代浏览器也没关系.即使只是获得更好的像素分辨率也很有用

通过SVG渲染是一种绕道,但如果可以做客户端,也可以选择.此链接表明它需要服务器端:http://bl.ocks.org/mbostock/6466603

将HTML渲染为图像

Answer 1

我想向您提供更多有关此的信息，因为我感觉这有点混乱。

您想到的两种主要渲染方法是矢量和光栅。光栅用像素渲染（格式包括 JPG、PNG24、PNG8、GIF），而矢量则渲染为科学公式（文件格式 SVG、Ai），使它们可扩展（因此得名“可扩展矢量图形”）。

它们有两种类型的压缩：有损和无损。

有损意味着像素化（它在模糊像素中从一种颜色到另一种颜色进行插值着色）。这通常是因为您将图像放大太多，并且在 9000% 缩放时发现图像不清晰。JPG 和 PNG24 是最好的文件示例。

无损意味着它不模糊。GIF 就是一个很好的例子：两种颜色之间有步长，要么是 color1，要么是 color2，而不是插值。

对于矢量来说，实体形状中可以有渐变，但是在实体形状的边界上（想想像文本之类的东西），即使放大一百万倍，它也会很清晰。

回到你的帖子，如果你想要更好的质量，你实际上需要一个 HTML 到 SVG 转换器。另请查看http://pngcrush.com/

希望这可以帮助！