10

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.

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 ?

[EDIT] 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!

Cheers, Ro

Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
Ro.
  • 1,357
  • 4
  • 13
  • 25
  • 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. May 08 '09 at 10:42

7 Answers7

3

Maybe it's possible with the Canvas:

MDN - Drawing Graphics with Canvas

Dave W.
  • 1,576
  • 2
  • 18
  • 29
Deniz Dogan
  • 25,711
  • 35
  • 110
  • 162
1

You can create an image tag from JavaScript but not the actual image in it: JS has no commands to allocate memory for the bitmap and it has no commands to render anything on it.

The usual solution is to have a report generator on the server which creates the image on request. Look at BIRT or JasperReports.

[EDIT] Based on your comment, the solution is simple: Examine the DIV, find the URL for the background image and replace the DIV with an IMG element. Put the URL into the SRC attribute and then print.

Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
  • True, thats how other things work.... 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. May 08 '09 at 10:42
  • Isn't there the new "Canvas"? I think you can draw stuff using that? – Deniz Dogan May 08 '09 at 10:47
  • Yes, the Canvas should work, too, if the print engine supports it. – Aaron Digulla May 08 '09 at 11:58
1

Very interesting question.

Actually I solve this problem using ajax (transfer images' positions to the server, server creates one image from pieces, save it and send url to the client). I don't very like this solution but I don't know other yet.

Roman
  • 64,384
  • 92
  • 238
  • 332
0

I really don't think this is possible on the browser, certainly not without some kind of plugin.

Could you send some coordinate info or something to the web server and that way have the web server request the same map image from the image server?

mike nelson
  • 21,218
  • 14
  • 66
  • 75
0

Generating images was only possible in IE5 :( Then due to security reasons it was dropped. I'm still missing it.

Thinker
  • 14,234
  • 9
  • 40
  • 55
0

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

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.

Ro.
  • 1,357
  • 4
  • 13
  • 25
  • 5
    Can you please expand your answer with more explanation? – Alejandro García Iglesias Dec 11 '12 at 21:53
  • This is not an accurate answer for this question although it might have solved your problem. The question is about how to capture a div as an image. Look at this for an answer https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas – Gautam Jul 15 '16 at 12:52
0

Does it have to be done on the browser side? I have seen where you can do a server side call and the MIME type on the server response is the image type. I think the example I'm thinking of was for b64 encoded jpegs in a db, but the process should be the same. The response would be the data that is currently in your DIV. Sorry if I'm way off base.

dsrekab
  • 456
  • 4
  • 13