Javascript 以编程方式从网页或单个 DIV 创建图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8745467/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programmatically create image from web-page or a single DIV
提问by AlenBer
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.
有什么方法可以从特定的 DIV 或完整的（网页）页面以编程方式创建（客户端或服务器端（PHP））图像？我目前正在创建一个免费优惠券网站，想法是当最终用户点击“打印”按钮时，应用程序会打开一个新标签/窗口，其中包含所有选定的优惠券作为单个图像（JPG、PNG或等..) 准备好打印的 A4 格式。每个优惠券都有自己的数据（商品名称、价格、描述等），所以我需要通过我设计的优惠券模板以编程方式完成。
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.
更新：我是用 PHP GD 库完成的 :) 仍然对使用图像而不是 PDF 的想法感到满意，因为在不同的 PC 上，每次打印结果都具有不同的优惠券尺寸（图像）。这就是为什么 PDF 可能是更好的解决方案。您可以在demo.svikuponi.ba上查看/测试它- 只需选择一些优惠券并单击上面的 PRINTAJ 按钮。
采纳答案by Mehul Hingu
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:
您肯定不能从 div 创建图像，但是您可以使用其 gd 库在 php 中创建动态图像。以下链接将有所帮助：
http://php.net/manual/en/function.imagecreate.php
http://php.net/manual/en/function.imagecreate.php
回答by Ido Green
Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
这是您在客户端创建图像的好方法：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).
你可以使用它并创建一个可以在 webkit 上很好地工作的网络应用程序（对于其他浏览器 - 我会看看 JS polyfills）。
回答by Strae
Did anyone mention html2canvasand/or jsfeedback?
有人提到html2canvas和/或jsfeedback吗？
It create a page screenshot completely in javascript, then you can send to the server via ajax..
它完全在javascript中创建一个页面截图，然后你可以通过ajax发送到服务器..
Obviously, CSS support lack some things.
显然，CSS 支持缺少一些东西。
回答by tom91136
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.phpif GD is not enough, you can try imagick as well
在php中，GD库中有很多图像相关的函数，如imagettftext()，详情请查看http://php.net/manual/en/book.image.php，如果GD不够用，可以试试imagick as好
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.
对于模板，您可以尝试从您的文件（图像）在 php 中创建一个真彩色句柄，并添加文本部分或其他具有各种效果和条形码等的内容。
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/
但在你的情况下，我会建议动态 PDF 创建，因为它会更好地格式化而不是普通图像，pdf 库：http: //www.fpdf.org/
回答by Benny
you could easily have a background image of your token/voucher and overlay the text using some php variables.
您可以轻松获得令牌/凭证的背景图像，并使用一些 php 变量覆盖文本。
i believe it is possible to create a unique bar-code with php imaging too.
我相信也可以使用 php 成像创建一个独特的条形码。
回答by Sjoerd
It is possible to get a screenshotfrom 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 GDor Imagick functions. This is less versatile, but easier to manage.
通过解析一些规范并将其提供给几个GD或 Imagick 函数，您可能会更好。这不太通用，但更容易管理。
