1

Is there source code (or a browser plugin) to convert the contents of an HTML 5 web page to an image file? This would not just include the visible contents, but the hidden contents as well (assuming there were scroll bars in the page). If there isn't, any advice on how to approach this particular functionality would be appreciated, and I can look into it.

I found this...

html to jpg with c#

However...

I think they just had text in the page, so it doesn't have any dynamic images on the page. My page specifically uses the HTML 5 canvas functionality to draw images. So that must be part of the image file.

Community
  • 1
  • 1
JustBeingHelpful
  • 18,332
  • 38
  • 160
  • 245

1 Answers1

1

It looks like you should be able to do it using javascript with this technique:

http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

Make sure to take note of the following caveat however:

Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it. If this condition is not met, a SECURITY_ERR exception is thrown.

EDIT: You may also want to check out these related questions:

Save HTML5 canvas contents, including dragged-upon images

How to save a HTML5 Canvas as Image on a server

Community
  • 1
  • 1
jwnace
  • 360
  • 3
  • 11
  • document.getElementById('canvasId').toDataURL() gives this error when on localhost: Uncaught TypeError: undefined is not a function – JustBeingHelpful Nov 05 '14 at 22:27
  • In Mozilla Firefox, I get more detail than when I'm in Google Chrome: Use of getAttributeNode() is deprecated. Use getAttribute() instead. .. in addition to the .toDataURL() is not a function – JustBeingHelpful Nov 05 '14 at 22:29
  • And the 3rd link is a repeat of the 1st link. – JustBeingHelpful Nov 05 '14 at 22:41
  • 1
    When I use a standard "canvas" HTML tag, this works. I just happen to be using the draw2d.js (Draw2D Touch) library, which wraps around Raphael.js. So I need to figure out how to reference the dynamically created canvas tag inside the div tag, they require. I'll mark this as the answer, and will post a new question. – JustBeingHelpful Nov 06 '14 at 06:23
  • draw2d.js builds an SVG tag, as a child of the DIV tag, not a canvas. So you need to put the canvas tag in the page in addition. This worked, but now I need to figure out how to download the image. http://stackoverflow.com/questions/5433806/convert-embedded-svg-to-png-in-place – JustBeingHelpful Nov 06 '14 at 06:43