Php 如何转换html&；css到图像？

我正在开发一个ecard制造商（我知道这很糟糕，不是我的主意…）。有没有办法不使用flash将特定dom元素的html和css转换为图像？我知道有图像魔法之类的东西，但要正确对齐和排列文本似乎相当复杂

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

我发现了这一点：但不幸的是，我只能使用php、ruby或客户端技术。

客户端解决方案 在客户端，您可以使用类库（使用HTML5）：=）

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

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..
}
});

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

服务器端解决方案 要获得服务器端解决方案，可以使用（使用Webkit）或（使用Gecko）

一个好的库是这两个的包装器。使用CasperJS，可以使用的代码是：

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

casper.run();

将其另存为

screenshot.js

（只是名称的一个示例，您也可以选择一个名称），并使用以下方法运行它：

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..
}
});

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

来自任何语言

服务器端的（可能更好）替代方案 另一个选项是使用，但这仅在可以在服务器中运行Java（并手动安装浏览器）时有效（然而，PhantomJS/SlimerJS/CasperJS没有这些要求）

仅当您需要完全模拟浏览器时才使用它（可能在使用插件时…）

---

Selenium的优点在于，您可以使用包装器连接到它（使用Selenium服务器），请参阅文档以获取列表：

我正在使用PHPImageWorkshop库（）。对于你想做的事情来说非常简单和完美

它使用PHP中的“层”系统

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

它将创建一个最终的图像与您的第一个图像+文本

服务器端解决方案 我一直在用+来做这件事。您需要一个HCTIAPI密钥，但可以使用免费帐户

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();

需要“vendor/autoload.php”；
$html=“Pong✅";
$css=“.ping{padding:20px；字体系列：'sans serif'；}”；
$client=new GuzzleHttp\client（）；
$res=$client->request（'POST'，'https://hcti.io/v1/image', [
'auth'=>['user\u id'，'api\u key']，
'form_params'=>['html'=>$html，'css'=>$css]
]);
echo$res->getBody（）；

响应返回图像的URL：

---

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

我在答案中添加了一些示例代码，以获得更完整的答案。+1非常好！谢谢。我会再等一会儿，看看是否还有服务器端解决方案。@Tjon不是一个选项。我自己不需要该图像。它应该在电子邮件中使用。因为连贯的电子邮件模板很困难，而且客户端我确实不想要图像，我没有太多选择。你能运行PhantomJS（）吗在服务器上？它是基于WebKit构建的，所以它应该像任何浏览器一样呈现html。下面是一个呈现为图像的示例。正如我写了上面的评论一样，我看到下面的答案已经被编辑，包含了一个PhantomJS/CasperJS示例。这个库可以将html+CSS页面转换为图像吗？