javascript - 将 HTML 元素渲染为 PNG 图像？

Question

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

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

这没问题，使用 html2canvas 将元素渲染到 Canvas 上，将其转换为 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 图像那样提供可缩放的文本。

我怀疑 Canvas 没有什么好办法， Canvas 是基于像素的，但以前错了。 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/

希望这对您有所帮助!