以编程方式从网页或单个 DIV 创建图像

Posted 2023-02-24

【中文标题】以编程方式从网页或单个 DIV 创建图像

【英文标题】：Programmatically create image from web-page or a single DIV

【发布时间】：2012-02-03 10:51:30

【问题描述】：

有没有办法以编程方式从特定 DIV 或完整（网页）页面创建（客户端或服务器端 (php)）图像？我目前正在为免费优惠券创建一个网站，其想法是当最终用户单击“打印”按钮时，应用程序会打开一个新选项卡/窗口，其中所有选定的优惠券作为单个图像（JPG、PNG或等..) 以 A4 格式准备打印。每张优惠券都有自己的数据（文章名称、价格、描述等），所以我需要通过我设计的优惠券模板以编程方式完成。

我不要求您为我编写代码，只是为了建议我可以使用/开发的解决方案。如果尚不存在，我将免费上传/发布 :)

更新：我用 PHP GD 库做到了 :) 仍然不满意使用图像而不是 PDF 的想法，因为在不同的 PC 上每次打印都会产生不同的优惠券大小（图像）。这就是为什么 PDF 可能是一个更好的解决方案。您可以在 demo.svikuponi.ba 上查看/测试它 - 只需选择一些优惠券并单击上面的 PRINTAJ 按钮。

【问题讨论】：

输出PDF文件而不是图像会好得多（也更容易）；有很多方法可以通过 PHP 或转换 html 来实现。

网站应该尽可能简单，我设计它是为了让年长（没有经验）的人可以执行简单的步骤：选择和打印优惠券。这就是为什么我更喜欢图像格式（PDF 需要安装 Adob​​e，最终，浏览器会弹出下载弹出窗口（相信我，我看到很少有人迷失方向:)）。

图像灵魂只是：按：Control + P

如果这就是问题所在，为什么不直接打开一个打印优化（通过 CSS）的页面呢？像 Google、RyanAir 和几乎每个人一样。

【参考方案1】：

你不能肯定地从 div 创建图像，但是你可以使用它的 gd 库在 php 中创建动态图像。 以下链接将有所帮助：

http://php.net/manual/en/function.imagecreate.php

http://phptutorial.info/learn/create_images/

【讨论】：

我会尝试第一个链接，这似乎是一个简单的解决方案:) 谢谢大家的精彩回答。

【参考方案2】：

这是您在客户端创建图像的好方法：http://smus.com/screen-capture-for-chrome-os

您可以使用它并创建一个在 webkit 上运行良好的网络应用程序（对于其他浏览器 - 我会看看 JS polyfills）。

【参考方案3】：

有人提到html2canvas 和/或jsfeedback 吗？

它完全用javascript创建一个页面截图，然后你可以通过ajax发送到服务器..

显然，CSS 支持缺少一些东西。

【讨论】：

此方法需要在截屏之前渲染页面客户端。

此解决方案将存在 CORS 问题，并且可能存在其他 http/s 相同协议问题。不推荐。

【参考方案4】：

在php中，GD库中有很多图像相关的函数，比如imagettftext() 详情请查看http://php.net/manual/en/book.image.php 如果GD不够用，也可以试试imagick

对于模板，您可以尝试在 php 中从您的文件（图像）创建一个真彩色句柄，并添加文本部分或其他具有各种效果和条形码等的东西。

但在您的情况下，我建议创建动态 PDF，因为它最好使用格式而不是普通图像，即 pdf lib： http://www.fpdf.org/

【讨论】：

这是否意味着最终用户必须安装 Adob​​e PDF ！？我一直在寻找一种图像格式，只是因为它不需要安装任何东西（除了浏览器），并且页面宽度/高度也会自动生成，因此最终用户不必担心正确打印它。

我相信PDF是一种广泛使用的格式，很少有电脑没有PDF阅读器，就像flash一样。但无论如何，你仍然可以在 GD + 图像模板部分使用我的建议

【参考方案5】：

您可以轻松获得令牌/凭证的背景图像，并使用一些 php 变量覆盖文本。

我相信也可以使用 php 成像创建一个独特的条形码。

【讨论】：

我有同样的想法，有一个默认模板，只是覆盖了它上面的文本数据。在服务器端或以某种方式在客户端进行处理是更好的做法！？

客户端会减少服务器负载，但所有用户都需要像一些java小程序一样满足“客户端要求”

完全依赖客户端并不总是一个好主意，对 javascript 没有任何保证。服务器端有更多负载，但是根据您的需要，这不会花费很长时间，因为它只是将变量回显到屏幕并可能创建图像。除非您的凭证将被数百万下载，否则我会在服务器端投票。

【参考方案6】：

可以从网页中获取screenshot，但这很麻烦。您需要启动一个网络浏览器来呈现页面并从中获取屏幕截图。

解析一些规范并将其提供给几个GD 或Imagick 函数可能会更好。这不太通用，但更易于管理。