Question

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

设计目标是以HTML + CSS呈现页面（简单，允许用户将文本复制/粘贴为数据表等），但将小部件复制/保存为图像以复制到PowerPoint等。原因是，在RIA内部进行客户端非常有帮助。

这没关系，使用html2canvas将元素渲染到画布，将其转换为PNG，然后在对话框中显示它，用户可以右键单击以保存或复制到剪贴板（JSFiddle 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

Render HTML to an image

Answer 1

我想给你一些关于此的更多信息，因为我觉得有点混乱。

您正在考虑的两个主要渲染方法是矢量和栅格。光栅使用像素（格式包括JPG，PNG24，PNG8，GIF）渲染，而矢量渲染为科学公式（文件格式SVG，Ai），使其可扩展（因此您获得名称'可缩放矢量图形'）。

这些有两种类型的压缩：有损和无损。

有损意味着像素化（它在从一种颜色到另一种颜色的模糊像素中具有插值着色）。这通常是因为您过度放大图像，并且在9000％变焦时看到它不清晰。 JPG和PNG24是最好的文件示例。

无损意味着它并不模糊。 GIF可以是一个很好的例子：两种颜色之间有步骤，可以是colour1或colour2，而不是插值。

在矢量的情况下，实体形状中可能存在渐变，但在实体形状的边界上（想想像文字一样），即使放大一百万次，它也会很清晰。

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

希望这有帮助！

将HTML元素渲染为PNG图像？

1 个答案: