将 HTML/CSS 转换为图像的更好方法答案

【问题标题】：Better way to convert HTML/CSS into Image将 HTML/CSS 转换为图像的更好方法
【发布时间】：2014-03-12 09:29:25
【问题描述】：

我正在创建网络应用程序，它允许创建简单的添加横幅。您可以在横幅上添加元素（文本、图像、框等）拖放、调整它们的大小、更改其属性。

为了更好地理解，下面是它的外观：

在横幅编辑器中，元素是带有内联样式的简单 HTML。

为了将创建的 HTML 隐藏到图像中，我使用库 - html2canvas。它基本上在画布上呈现 HTML，可以保存为图像。但它有限制（并非所有 css 属性都受支持），结果图像有时与预览不同。

所以我的问题是：

有更好的方法吗？
是否可以将部分页面截图并保存为图片？
有没有办法在服务器上用 CSS 渲染 HTML？既然 NodeJs 使用 v8 引擎，也许有办法用它来渲染 HTML/CSS？

我不需要跨浏览器解决方案。如果它只适用于 chrome 就很好。

【问题讨论】：

您可以使用 PhantomJS 或其他类似的解决方案在服务器上渲染它。
HTML > Canvas > IMAGE 在这里查看教程freakyjolly.com/…

标签： javascript jquery node.js google-chrome html2canvas

【解决方案1】：

查看https://github.com/niklasvh/html2canvas/issues/283 - 可能有用。

【讨论】：

【解决方案2】：

使用html2Canvas库转换HTML >> Canvas >> 图片（PNG或JPG）

      html2canvas(document.getElementById("image-wrap")).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "manpower_efficiency.jpg";
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });

来源：http://www.freakyjolly.com/convert-html-document-into-image-jpg-png-from-canvas/

【讨论】：