我正在开发一个ecard maker（我知道这很糟糕，不是我的主意…）。有没有办法在不使用flash的情况下将特定dom元素的html和css转换为图像？我知道有图像魔术之类的，但要正确对齐和排序文本似乎相当复杂。
最好我正在寻找一个服务器端解决方案，因为从客户端发布图像可能需要一些时间。
我发现：https://code.google.com/p/java-html2image/但不幸的是，我只能使用php、ruby或客户端技术。
客户端解决方案
在客户端，您可以使用类似库（使用HTML5）的东西：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/CaperJS没有这些要求）
只有当需要完全模拟浏览器时才使用它（可能在使用插件时…）
Selenium的优点是可以使用包装器连接到它（使用Selenium Server），请参阅文档以获得列表：http://code.google.com/p/selenium/w/list
我正在使用PHPImageWorkshop库(http://phpimageworkshop.com)。真的很简单，非常适合你想做的事情。
它使用PHP中的"层"系统。
只需初始化第一层（图像）并创建第二层（文本）。
它将创建一个最终的图像与您的第一个图像+文本！
服务器端解决方案
我一直在使用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"}