StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Yes, there is, but it's tricky and maybe impossible to get it to render exactly as it appears on the page unless the div element and its appearance as possibly defined in CSS are defined in a manner than can fully stand-alone from the page.</p> <ol> <li>Embed the desired HTML into SVG as a foreign object.</li> <li>Draw the image. (These two steps are summarized here <a href="https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas?redirectlocale=en-US&redirectslug=Web%2FHTML%2FCanvas%2FDrawing_DOM_objects_into_a_canvas" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas?redirectlocale=en-US&redirectslug=Web%2FHTML%2FCanvas%2FDrawing_DOM_objects_into_a_canvas</a> )</li> <li>Obtain the canvas data using <code>getImageData()</code></li> <li>Encode the data into the desired image format (or send the stream of data to the server encoded as base64 (step 3 and 4 can be done as one step by using <code>toDataURL</code>)</li> </ol> <p>An example image format easy to work with on one's own is the Unix PNM (PBM, PGM, and PPM) formats which can be sent as ASCII data.</p> <pre><code>P2 # foo.pgm 18 7 9 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3 3 3 3 0 0 6 6 6 6 0 0 9 9 9 9 0 0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0 0 3 3 3 0 0 0 6 0 0 6 0 0 9 0 0 9 0 0 3 0 0 0 0 0 6 0 0 6 0 0 9 0 0 9 0 0 3 0 0 0 0 0 6 6 6 6 0 0 9 9 9 9 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 </code></pre> <p>(Enlarged 20x: <a href="http://www.codelib.net/html/foo.png" rel="nofollow noreferrer">http://www.codelib.net/html/foo.png</a> )</p> <p>Stealing from <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement</a> to show you an example of using <code>toDataURL</code> to output PNG image data:</p> <pre><code>function test() { var canvas = document.getElementById("canvas"); var url = canvas.toDataURL(); var newImg = document.createElement("img"); newImg.src = url; document.body.appendChild(newImg); } </code></pre> <p>Another way is to build upon the work done by html2canvas:</p> <p><a href="https://stackoverflow.com/questions/10457608/create-screenshot-of-webpage-using-html2canvas-unable-to-initialize-properly">create screenshot of webpage using html2canvas (unable to initialize properly)</a></p> <p>The accepted answer there shows how to screenshot the HTML body element, but it could easily be modified to "screenshot" the contents of a div by modifying the jQuery selector on the first line of the code.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload