将 Div 内容或画布保存为图像

Posted 2023-03-15

【中文标题】将 Div 内容或画布保存为图像

【英文标题】：Saving Div Contents or Canvas as Image

【发布时间】：2011-11-12 11:03:27

【问题描述】：

我已经阅读了一些类似的问题和答案，但没有一个能完全解决我的问题。

这是我的场景： 我有类似于 tinyMCE（虽然是自制版本）的编辑器。它允许用户输入一些文本和一两个图像等。我有代码可以将项目放入其中并将它们实时呈现为一个较小的 div（本质上是一个缩略图）。

这是我想做的事 最终，用户可能希望在其他地方使用他们的“页面”，所以我想让他们进入屏幕，查看每个页面的缩略图，然后选择一个。

问题来了 显然，我可以使用相同的缩略图代码来呈现每个页面缩略图。但是，它可能会占用大量带宽（每个页面可能有多个图像，更不用说计算必须执行多次 - 我们在预览页面上可能会讨论 40 到 50 个缩略图）。

所以，我想尝试获取缩略图 div，并在他们将页面保存在编辑器中时以某种方式创建 png 或 jpg（因此页面的代码以及缩略图），并将其推送到我的 php 脚本将图像保存到服务器。

我的第一个想法是也许canvas 可以做到这一点，但是首先将文本和图像翻译到canvas 上存在问题，这可能会也可能不会。

原来如此。我对任何和所有选项都感兴趣，包括商业图书馆（如果有的话）可以做到这一点——唯一的事情是，希望它在 javascript 中。

【参考方案1】：

您可能想查看： http://html2canvas.hertzen.com/

已经问过一个类似的问题： Screen Grab with PHP and/or Javascript?

【讨论】：

谢谢 - html2canvas 将帮助我完成 90% 的工作。再次感谢。