我正在开发电子贺卡制作工具(我知道这很糟糕,不是我的主意...)。有什么方法可以在不使用 flash 的情况下将特定 dom 元素的 html 和 css 转换为图像?我知道有 image magick 之类的东西,但是正确对齐和排序文本似乎相当复杂。
我最好寻找服务器端解决方案,因为从客户端发布图像可能需要一些时间。
我找到了这个:https://code.google.com/p/java-html2image/但不幸的是,我只能使用 php、ruby 或客户端技术。
最佳答案
客户端解决方案
在客户端,您可以使用类似库(使用 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 服务器),请参阅文档以获取列表:http://code.google.com/p/selenium/w/list
关于php - 如何将 html 和 css 转换为图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20442496/