使用JavaScript创建DIV的图像（GIF/PNG）

Question

我想知道是否有一种JavaScript库可以让我从一个DIV的内容生成一个图像。

基本上这是为了一些服务器端打印代码所需，需要从浏览器中打印出一个背景。

我最终想要做的是将DIV内容编码成PNG格式，并将编码后的数据与打印操作一起上传。

有没有可能实现这个功能呢？

[编辑] 我有一个映射应用程序，背景数据来自一个图像服务器，直接进入浏览器DIV（类似于Google地图）。那个div是主数据的背景。当按下打印按钮时，服务器会从它知道的数据生成PDF，但不知道浏览器的背景数据。我真正想做的是以某种方式向服务器提供浏览器的背景图像！

谢谢， Ro

- Ro.

---

我有一个映射应用程序，其中背景数据直接从图像服务器传输到浏览器DIV中（类似于Google Maps）。 该div是主要数据的背景。当按下打印按钮时，服务器会从已知数据生成PDF，但不知道浏览器的背景数据。我真正想要的是以某种方式向服务器提供浏览器的背景图像！ - Ro.

Answer 1

也许可以使用Canvas实现：

请参考MDN - 用 Canvas 绘制图形。

- Deniz Dogan

Answer 2

你可以通过JavaScript创建一个图片标签，但无法在其中显示实际的图像：JS没有用于分配位图内存的命令，也没有用于渲染图像的命令。

通常的解决方案是在服务器上拥有一个报表生成器，根据请求创建图像。可以查看BIRT或JasperReports。

[编辑] 根据您的评论，解决方案很简单：检查DIV，找到背景图像的URL，并将DIV替换为IMG元素。将URL放入SRC属性中，然后打印。

- Aaron Digulla

---

没错，其他事情都是这样运作的... 我有一个映射应用程序，其中背景数据来自图像服务器，直接进入浏览器DIV（类似Google Maps）。 该div是我的主要数据背景。当按下打印按钮时，服务器从其所知道的数据生成PDF，但不知道浏览器的背景数据。我真正想要的是以某种方式向服务器提供浏览器的背景图像！ - Ro.

"Canvas" 不是新的吗？我认为你可以用它来绘制东西吧？ - Deniz Dogan

是的，如果打印引擎支持它，Canvas 也应该可以工作。 - Aaron Digulla

Answer 3

非常有趣的问题。

实际上，我使用ajax解决了这个问题（将图像位置传输到服务器，服务器从碎片创建一个图像，保存并向客户端发送URL）。我不是很喜欢这个解决方案，但我还不知道其他的方法。

- Roman

Answer 4

我真的不认为在浏览器上实现这个是可能的，除非使用某种插件。

你可以发送一些坐标信息或其他内容到Web服务器，然后由Web服务器从图像服务器请求相同的地图图像吗？

- mike nelson

Answer 5

生成图像只有在IE5中才可能:( 然后由于安全原因被删除了。我仍然很想念它。

- Thinker

Answer 6

我想我已经找到了一种方法来实现它。

1）当用户按下打印按钮时，询问DIV
2）该DIV上的图像是由OpenLayers API生成的
3）获取每个图像的URL
4）获取每个图像在屏幕上的位置
5）将屏幕位置转换为真实世界位置（我有API可以做到这一点）
6）作为打印的一部分，发送所有图像URL以及它们的真实世界范围
7）允许服务器重新请求图像并将它们绘制到相应的位置。

- Ro.

---

请您展开回答并提供更多解释。 - Alejandro García Iglesias

虽然这可能解决了你的问题，但这不是这个问题的准确答案。这个问题是关于如何将一个div捕获为图像。请查看此链接以获取答案：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas - Gautam

Answer 7

这必须在浏览器端完成吗？我见过可以进行服务器端调用的情况，服务器响应的MIME类型是图像类型。我想我所想的示例是针对数据库中的b64编码jpeg，但该过程应该是相同的。响应将是当前在您的DIV中的数据。如果我完全错了，请原谅。

- dsrekab