用JavaScript创建DIV图像(GIF / PNG)

时间:2009-05-08 10:31:17

标签: javascript image

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

基本上这是某些服务器端打印代码所必需的,需要从浏览器打印背景。

我最终想做的是将DIV内容编码为PNG格式,并通过打印操作发布编码数据。

如果有可能,有什么想法吗?

[编辑]我所拥有的是一个地图应用程序,其中背景数据直接从图像服务器进入浏览器DIV(Think Google Maps)。 div是我主要数据的背景。按下Print时,服务器会根据其知道的数据生成PDF,但对浏览器的后台数据一无所知。我真正喜欢的是能够以某种方式为服务器提供浏览器背景图像!

干杯, RO

7 个答案:

答案 0 :(得分:3)

使用Canvas

可能也是可能的

MDN - Drawing Graphics with Canvas

答案 1 :(得分:1)

您可以从JavaScript创建图像标记,但不能在其中创建实际图像:JS没有为位图分配内存的命令,也没有命令在其上呈现任何内容。

通常的解决方案是在服务器上安装一个报告生成器,根据请求创建图像。请查看BIRTJasperReports

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

答案 2 :(得分:1)

非常有趣的问题。

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

答案 3 :(得分:0)

我真的不认为这在浏览器上是可能的,当然不是没有某种插件。

您是否可以向网络服务器发送一些坐标信息或某种东西,以便网络服务器从图像服务器请求相同的地图图像?

答案 4 :(得分:0)

只能在IE5中生成图像:(然后由于安全原因,它被删除了。我仍然错过了它。

答案 5 :(得分:0)

我想我已经找到了办法。

1)当用户按下Print时,询问DIV
2)该DIV上的图像由OpenLayers API生成 3)抓住每个图像的URL 4)抓住每个图像的屏幕上的位置
5)将屏幕位置转换为真实世界位置(我有此API)
6)作为打印的一部分,发送所有图像URL以及它们的真实世界范围 7)允许服务器重新请求图像并将它们绘制到适当的位置。

答案 6 :(得分:0)

是否必须在浏览器端完成?我已经看到你可以在哪里进行服务器端调用,服务器响应上的MIME类型是图像类型。我认为我想到的例子是db中的b64编码jpeg,但过程应该是相同的。响应将是您DIV中当前的数据。对不起,如果我离开基地。