将 HTML 元素渲染为 PNG 图像？答案

【问题标题】：Render HTML element as PNG image?将 HTML 元素渲染为 PNG 图像？
【发布时间】：2014-07-30 03:54:48
【问题描述】：

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

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

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

     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

【问题讨论】：

“可缩放且非像素化的 PNG 图像”——您知道这些属性之间存在严重矛盾吗？ PNG是一种像素格式。 “像 PNG 图像这样的可缩放文本在其他方面能够做到”——它不是。像 FireWorks 这样的应用程序可能会这样做，但它使用私人存储的数据来重新创建另一种大小的 PNG。
谢谢！其实这对我来说是新闻。读过PNG是一种无损压缩格式，但现在意识到它根本不会丢失像素。也许不应该对这部网络漫画读太多：lbrandy.com/assets/jpg_vs_png2.png
更新太久，根本问题是在 Retina 机器上将图像转换为 PNG 看起来比原始图像模糊。在这种情况下，使用 github.com/tsayen/dom-to-image 并将比例加倍 domToImage.toPng(view.el, {scale: 2}).then(function (imgUri) {...}) 解决了这种差异。

标签： javascript html png

【解决方案1】：

我想给你更多关于这方面的信息，看到有一点混乱，我感觉。

您正在考虑的两种主要渲染方法是矢量和光栅。光栅用像素渲染（格式包括 JPG、PNG24、PNG8、GIF），而矢量被渲染为科学公式（文件格式 SVG、Ai），使它们具有可伸缩性（因此您得名“可伸缩矢量图形”）。

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

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

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

在矢量的情况下，立体形状中可以有渐变，但在立体形状的边界上（想想像文本），即使放大一百万倍，它也会很清晰。

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

希望这会有所帮助！

【讨论】：

是的。矢量是可缩放的，光栅不是。找到这个stackoverflow.com/questions/12005860/…