以编程方式从网页或单个 DIV 创建图像
有没有办法以编程方式从特定 DIV 或完整(网页)页面创建(客户端或服务器端(PHP))图像?我目前正在创建一个免费优惠券网站,其想法是当最终用户单击“打印”按钮时,应用程序会打开一个新选项卡/窗口,其中所有选定的优惠券作为单个图像(JPG、PNG或等..)以A4格式准备打印。每个优惠券都有自己的数据(文章名称、价格、描述等),因此我需要通过我设计的优惠券模板以编程方式完成它。
我不要求您为我编写代码,只是为了建议我可以使用/开发的解决方案。如果尚不存在,我将免费上传/发布:)
更新:我使用 PHP GD 库做到了:) 仍然不满意使用图像而不是 PDF 的想法,因为每次打印结果都有不同的优惠券尺寸(图像) )在不同的电脑上。这就是为什么 PDF 可能是更好的解决方案。您可以在 demo.svikuponi.ba 上查看/测试它 - 只需选择一些优惠券并单击上面的 PRINTAJ 按钮。
Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.
I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)
Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(6)
您肯定无法从 div 创建图像,但是您可以使用 php 的 gd 库在 php 中创建动态图像。
以下链接将有所帮助:
http://php.net/manual/en/function.imagecreate .php
http://phptutorial.info/learn/create_images/
You cannot create image from div for sure but yes you can create dynamic images in php using its gd library.
Following links will help:
http://php.net/manual/en/function.imagecreate.php
http://phptutorial.info/learn/create_images/
这是在客户端创建图像的好方法:http://smus。 com/screen-capture-for-chrome-os
您可以使用它并创建一个可以在 webkit 上正常工作的 Web 应用程序(对于其他浏览器 - 我将查看 JS polyfills)。
Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).
有没有人提到 html2canvas 和/或 jsfeedback ?
它完全用javascript创建页面截图,然后你可以通过ajax发送到服务器。
显然,CSS支持缺少一些东西。
Did anyone mention html2canvas and/or jsfeedback ?
It create a page screenshot completely in javascript, then you can send to the server via ajax..
Obviously, CSS support lack some things.
在php中,有很多与图像相关的函数,例如GD库中的imagettftext()
有关详细信息,请查看 http://php.net/manual/en/book.image .php
如果 GD 还不够,您也可以尝试使用 imagick
作为模板,您可以尝试从文件(图像)在 php 中创建真彩色句柄,并添加文本部分或其他具有各种效果和条形码等的内容。
但就你而言,我建议动态 PDF 创建,因为使用格式而不是纯图像(pdf 库)会更好:
http://www.fpdf.org/
In php, there is many image related functions like imagettftext() in GD library
for details, check this out http://php.net/manual/en/book.image.php
if GD is not enough, you can try imagick as well
for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.
but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib :
http://www.fpdf.org/
您可以轻松获得代币/优惠券的背景图像,并使用一些 php 变量覆盖文本。
我相信也可以用 php 成像创建一个独特的条形码。
you could easily have a background image of your token/voucher and overlay the text using some php variables.
i believe it is possible to create a unique bar-code with php imaging too.
可以获得屏幕截图从网页上,但这很麻烦。您需要启动网络浏览器来呈现页面并从中获取屏幕截图。
您可能最好解析一些规范并将其提供给几个 GD 或 Imagick 函数。这不太通用,但更易于管理。
It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.
You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.