如何将 html & css 转换为图像？

Posted 2023-03-05

【中文标题】如何将 html & css 转换为图像？

【英文标题】：How to convert html & css to an image?

【发布时间】：2013-12-24 21:38:57

【问题描述】：

我正在开发一个电子贺卡制造商（我知道这很糟糕，不是我的主意......）。有没有办法在不使用 Flash 的情况下将特定 dom 元素的 html 和 css 转换为图像？我知道有图像魔法之类的，但是正确对齐和排序文本似乎相当复杂。

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

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

【问题讨论】：

@TJonS 不是一个选项。我不需要自己的图像。它应该在电子邮件中使用。由于连贯的电子邮件模板很困难，而且客户肯定想要一张图片，所以我别无选择。

你能在服务器上运行 PhantomJS (github.com/ariya/phantomjs) 吗？它建立在 WebKit 之上，因此它应该像任何浏览器一样呈现 html。这是一个渲染为图像github.com/ariya/phantomjs/wiki/Screen-Capture的示例。

正如我写上面的评论一样，我看到下面的答案已被编辑为包含一个 PhantomJS/CasperJS 示例。

【参考方案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

【讨论】：

我在答案中添加了一些示例代码，以获得更完整的答案。

+1 非常好！谢谢你。我再等一会儿，看看是否还有服务器端解决方案。

【参考方案2】：

我正在使用 PHPImageWorkshop 库 (http://phpimageworkshop.com)。非常简单，非常适合您想做的事情。

它使用PHP中的“层”系统。

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

它将使用您的第一张图片+文字创建最终图片！

【讨论】：

这个库可以将 HTML + CSS 页面转换为图像吗？

【参考方案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"