将 HTML Div 内容转换为图像

Posted 2023-05-08

【中文标题】将 HTML Div 内容转换为图像

【英文标题】：Convert HTML Div content to Image

【发布时间】：2012-06-19 05:42:05

【问题描述】：

我正在尝试制作一种图像编辑器类型的页面。人物可以向背景图像添加文本和样式。我通过 html、Jquery 和 css 完成的所有工作，但都将其导出为图像。我想将特定的 div 转换为图像。

注意：我已经知道通过 SVG 和 HTML5 Canvas 可以实现 HTML 到图像的转换。由于浏览器的兼容性，我不能做这些事情。

如果有任何 php 类或 jquery 插件可用，请帮助我。

【问题讨论】：

php 适合你

PDF created in-browser 有用吗？

如何使用php？？你能解释一下吗？

这个答案可能有你想要的商品：Website screenshots using PHP

【参考方案1】：

我认为直接在客户端没有 HTML5 功能是不可能的。可能是我错了吗？

我的解决方案是将整个 div（带有样式）发送到后端服务器，在后端服务器上使用 PhantomJS 或 Qt Webkit 捕获屏幕截图。在服务器端，您应该打开在用户浏览器中显示的 DIV 用户，然后对该 DIV 进行截图。

【讨论】：

如何将 div 转换为图像。我可以将整个样式发送到服务器，但我无法进行图像转换。

让我解释一下。用户已绘制元图像。这是一组 HTML 实体。然后所有用户图纸都已发送到服务器（图纸实体的坐标）。这就像在 Photoshop 中录制宏一样。所有用户操作都已发送到服务器。然后，您的后端代码必须重新生成一些 html，当打开这些 html 时，它应该完全按照用户绘制的内容显示，例如“您的后端代码启动浏览器并查看结果”然后您可以使用 Qt Webkit 通过 Webkit 引擎以编程方式打开这个生成的 html 页面，然后捕获屏幕截图。 Cutycapt 可以为您提供帮助。