I'm developing an ecard-maker (I know it's awful, not my idea...). Is there any way to convert html and css of a specific dom-element to an image without using flash? I know there is image magick and the like, but it seems to be quite complicated to align and order the text properly.
我正在开发一个生态模型(我知道这很糟糕，不是我的主意……)有没有什么方法可以在不使用flash的情况下将特定dom-element的html和css转换成图像?我知道有图片魔术之类的东西，但要正确排列和排列文本似乎相当复杂。
Preferably I'm looking for a server-side solution, as posting an image from the client could take some time.
最好是我在寻找一个服务器端解决方案，因为在客户机上发布一个图像可能需要一段时间。
I found this: https://code.google.com/p/java-html2image/ but unfortunately I can only use php, ruby or client-side technologies.
我发现了这一点:https://code.google.com/p/java-html2image/但不幸的是，我只能使用php、ruby或客户端技术。
2 个解决方案
#1
6
Client Side solution
In Client Side, you can use something like library (that uses HTML 5): http://html2canvas.hertzen.com/ =)
在客户端，您可以使用类似于库的东西(使用HTML 5): http://html2canvas.hertzen.com/ =)
With it, you can use something like:
有了它，你可以使用如下的东西:
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..
}
});
Server Side solution
To get a server side solution, you can use PhantomJS (that uses Webkit) or SlimerJS (that uses Gecko).
要获得服务器端解决方案，可以使用PhantomJS(使用Webkit)或SlimerJS(使用Gecko)。
A good library that is a wrapper to these two is CasperJS. Using CasperJS, a code that can be used is:
一个很好的库就是CasperJS。使用CasperJS，可以使用的代码是:
casper.start(casper.cli.args[0], function() {
this.captureSelector(casper.cli.args[1], casper.cli.args[2]);
});
casper.run();
Save it as screenshot.js (just an example of name, you can choice a name too) and run it by using something like:
保存截图。js(只是名字的一个例子，你也可以选择一个名字)，通过如下操作来运行:
casperjs screenshot.js (URL) (image path) (selector)
From any language.
从任何语言。
A (possible better) alternative to Server Side
Other option is use Selenium, but this is only valid if you can run Java in your server (and install browsers manually) (PhantomJS/SlimerJS/CasperJS, however, does not have these requeriments)
其他选项是使用Selenium，但只有在服务器中运行Java(并手动安装浏览器)时才有效(PhantomJS/SlimerJS/CasperJS没有这些请求程序)
Use it only if you need to emulate a browser completely (maybe when using plugins...)
只有当您需要完全模拟浏览器时才使用它(可能当使用插件时…)
The best of Selenium is that you can use wrappers to connect to it (using Selenium Server), see the documentation to get the list: http://code.google.com/p/selenium/w/list
Selenium的好处是，您可以使用包装器连接到它(使用Selenium服务器)，请参阅获取列表的文档:http://code.google.com/p/selenium/w/list
#2
1
I'm using PHPImageWorkshop library (http://phpimageworkshop.com). Really simple and perfect for what you want to do.
我正在使用PHPImageWorkshop库(http://phpimageworkshop.com)。非常简单，非常适合你想做的事情。
It uses the system of "layers" in PHP.
它使用PHP中的“层”系统。
Just initialize your first layer (the image) and create a second layer (your text).
只需初始化第一层(图像)并创建第二层(文本)。
It will create a final image with your first image + the text !
它将创建一个最终的图像与您的第一个图像+文本!
#1
6
Client Side solution
In Client Side, you can use something like library (that uses HTML 5): http://html2canvas.hertzen.com/ =)
在客户端，您可以使用类似于库的东西(使用HTML 5): http://html2canvas.hertzen.com/ =)
With it, you can use something like:
有了它，你可以使用如下的东西:
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..
}
});
Server Side solution
To get a server side solution, you can use PhantomJS (that uses Webkit) or SlimerJS (that uses Gecko).
要获得服务器端解决方案，可以使用PhantomJS(使用Webkit)或SlimerJS(使用Gecko)。
A good library that is a wrapper to these two is CasperJS. Using CasperJS, a code that can be used is:
一个很好的库就是CasperJS。使用CasperJS，可以使用的代码是:
casper.start(casper.cli.args[0], function() {
this.captureSelector(casper.cli.args[1], casper.cli.args[2]);
});
casper.run();
Save it as screenshot.js (just an example of name, you can choice a name too) and run it by using something like:
保存截图。js(只是名字的一个例子，你也可以选择一个名字)，通过如下操作来运行:
casperjs screenshot.js (URL) (image path) (selector)
From any language.
从任何语言。
A (possible better) alternative to Server Side
Other option is use Selenium, but this is only valid if you can run Java in your server (and install browsers manually) (PhantomJS/SlimerJS/CasperJS, however, does not have these requeriments)
其他选项是使用Selenium，但只有在服务器中运行Java(并手动安装浏览器)时才有效(PhantomJS/SlimerJS/CasperJS没有这些请求程序)
Use it only if you need to emulate a browser completely (maybe when using plugins...)
只有当您需要完全模拟浏览器时才使用它(可能当使用插件时…)
The best of Selenium is that you can use wrappers to connect to it (using Selenium Server), see the documentation to get the list: http://code.google.com/p/selenium/w/list
Selenium的好处是，您可以使用包装器连接到它(使用Selenium服务器)，请参阅获取列表的文档:http://code.google.com/p/selenium/w/list
#2
1
I'm using PHPImageWorkshop library (http://phpimageworkshop.com). Really simple and perfect for what you want to do.
我正在使用PHPImageWorkshop库(http://phpimageworkshop.com)。非常简单，非常适合你想做的事情。
It uses the system of "layers" in PHP.
它使用PHP中的“层”系统。
Just initialize your first layer (the image) and create a second layer (your text).
只需初始化第一层(图像)并创建第二层(文本)。
It will create a final image with your first image + the text !
它将创建一个最终的图像与您的第一个图像+文本!