用JavaScript创建DIV图像（GIF / PNG） [英] Create an Image of a DIV in JavaScript (GIF/PNG)

问题描述

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

I'm wondering is there a JavaScript library available that would allow me to generate an Image from the contents of a DIV.

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

Basically this is required for some Server-Side Printing code, which needs to print a background from the Browser.

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

What I'd ultimately like to do would be encode the DIV contents into PNG format and post up the encoded data with the print operation.

如果有可能，是否有任何想法？

Any ideas if this is possible ?

我是什么has是一个地图应用程序，其中背景数据直接从图像服务器进入浏览器DIV（Think Google Maps）。 div是我主要数据的背景。按下Print时，服务器会根据其知道的数据生成PDF，但对浏览器的后台数据一无所知。我真正喜欢的是能够以某种方式为服务器提供浏览器背景图像！

What I have is a mapping application where background data is coming from an image server straight into a browser DIV (Think Google Maps). That div is background to me main data. When Print is pressed the server generates a PDF from the data it knows about, but knows nothing about the browser's background data. What I'd really like is to be able to provide the server with the browsers background image in some way!

干杯，
Ro

Cheers, Ro

推荐答案

我想我已经找到了办法。

I think I've worked out a way to do it.

1）当用户按下Print时，询问DIV

2）OpenLayers API正在生成该DIV上的图像

3）抓取每个图像的URL

4）抓住每个图像屏幕上的位置

5）将屏幕位置转换为真实世界位置（我有此API）

6）作为打印发送所有图像URL及其真实世界范围

7）允许服务器重新请求图像并将其绘制到适当的位置。

1) When the user presses Print, interrogate the DIV
2) Images on that DIV are being generated by the OpenLayers API
3) Grab the URL of each Image
4) Grab the location on screen of each image
5) Translate the screen location into a Real-World location (I have API for this)
6) As part of the print send up all the image URL's along with their real-world extents
7) Allow the server to re-request the Images and draw them into their appropriate locations.

这篇关于用JavaScript创建DIV图像（GIF / PNG）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！