如何将HTML和CSS转换成图片？

Question

我正在开发一款电子贺卡制作工具（我知道这很糟糕，但这不是我的想法...）。有没有办法将特定dom元素的html和css转换为图像而不使用flash？ 我知道有imagemagick之类的工具，但似乎很难正确对齐和排列文本。

最好找一个服务器端解决方案，因为从客户端发布图像可能需要一些时间。

我找到了这个：https://code.google.com/p/java-html2image/ 但不幸的是我只能使用php、ruby或客户端技术。

- hugo der hungrige

---

@TJonS 不是一个选项。我不需要这张图片给自己看。它应该在邮件内部使用。由于一致的电子邮件模板很难实现，并且客户明确希望有一张图片，因此我没有太多选择。 - hugo der hungrige

你能在服务器上运行PhantomJS（https://github.com/ariya/phantomjs）吗？它是基于WebKit构建的，因此应该可以像任何浏览器一样渲染HTML。这里有一个将其渲染为图像的示例https://github.com/ariya/phantomjs/wiki/Screen-Capture。 - Joar Leth

就在我写上面的评论的时候，我看到下面的答案已经被编辑以包括一个PhantomJS/CasperJS的例子。 - Joar Leth

Answer 1

客户端解决方案

在客户端，您可以使用类似于使用HTML 5的库（例如：http：//html2canvas.hertzen.com/）=）。

使用它，您可以使用以下内容：

html2canvas(document.getElementById("element-id"), {
onrendered: function(canvas) {
  var image = new Image();
  image.src = canvas.toDataURL("image/png"); // This should be image/png as browsers (only) support it (to biggest compatibilty)
  // Append image (yes, it is a DOM element!) to the DOM and etc here..
}
});

服务器端解决方案

为了获得服务器端解决方案，您可以使用 PhantomJS（使用 Webkit）或 SlimerJS（使用 Gecko）。

一个很好的库是这两个库的包装器，名为 CasperJS。使用 CasperJS 可以编写以下代码：

casper.start(casper.cli.args[0], function() {
    this.captureSelector(casper.cli.args[1], casper.cli.args[2]);
});

casper.run();

将它保存为screenshot.js（只是一个示例名称，您也可以选择自己的名称），并使用类似以下方式运行：

casperjs screenshot.js (URL) (image path) (selector)

从任何语言翻译。

一种（可能更好的）替代服务器端的选择

另一个选项是使用Selenium，但这只在您的服务器上可以运行Java并手动安装浏览器时才有效（PhantomJS/SlimerJS/CasperJS则没有这些要求）。

仅在您需要完全模拟浏览器时使用它（也许在使用插件时...）

Selenium的最佳之处在于您可以使用包装器连接到它（使用Selenium Server），请查看文档以获取列表：http://code.google.com/p/selenium/w/list

- Fernando Jorge Mota

---

我已经添加了一些示例代码到答案中，以使其更完整。 - Fernando Jorge Mota

非常好！谢谢。我会再等一段时间，看看是否有服务器端的解决方案。 - hugo der hungrige

Answer 2

我正在使用PHPImageWorkshop库（http://phpimageworkshop.com），非常简单且完美地实现了您想要的功能。

它在PHP中使用“图层”系统。

只需初始化第一层（图像）并创建第二层（文本）即可。

它将创建一个包含第一张图像和文本的最终图像！

- Julien F.

---

这个库能将HTML + CSS页面转换为图片吗？ - SlimenTN

Answer 3

服务器端解决方案

我一直在使用 Guzzle + HCTI API 来完成这个任务。您需要一个 HCTI API 密钥，但可以使用免费账户。

require 'vendor/autoload.php';

$html = "<div class='ping'>Pong ✅</div>";
$css = ".ping { padding: 20px; font-family: 'sans-serif'; }";

$client = new GuzzleHttp\Client();
$res = $client->request('POST', 'https://hcti.io/v1/image', [
  'auth' => ['user_id', 'api_key'],
  'form_params' => ['html' => $html, 'css' => $css]
]);

echo $res->getBody();

响应返回图像的URL：

{"url":"https://hcti.io/v1/image/5803a3f0-abd3-4f56-9e6c-3823d7466ed6"}

- mscccc