Question

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

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

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

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)

来自任何语言。

A（可能更好）替代服务器端

其他选项是使用Selenium，但这仅在可以在您的服务器中运行Java（并手动安装浏览器）时才有效（但是，PhantomJS / SlimerJS / CasperJS不是有这些requeriments）

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

最好的Selenium是你可以使用包装器连接它（使用Selenium Server），请参阅文档以获取列表：http://code.google.com/p/selenium/w/list

Answer 2

我正在使用PHPImageWorkshop库（http://phpimageworkshop.com）。对你想做的事情非常简单和完美。

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

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

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

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

Response返回图像的URL：

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

如何转换html＆amp; css到图像？

3 个答案:

客户端解决方案

服务器端解决方案

A（可能更好）替代服务器端

服务器端解决方案