Is there in Jquery or Dojo or plain JavaScript way to convert div to image?

Question

Is there in Jquery or Dojo or pure JavaScript way to convert div to image ? Extension of image is arbitrary.

Javascript `Image` type or a literal .jpg/.png/...? Either way, I don't think this is possible via JavaScript. — Brandon Boone, Jul 06 '11 at 13:56
@Andrew Whitaker I need to sent that image to server and save with php in some folder. Is this possible at all ? — Damir, Jul 06 '11 at 13:58
http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf the closes you'd come to that is this, or try to google html to image, html to pdf and whats not, but still, the use of styles have to be considered before hand :) — Val, Jul 06 '11 at 14:09
Are you doing this because you need an exact copy of what the user is seeing? If so, why not just store a copy of the DOM? You can get it with `$('#myDiv').html()`, and then send that to your server with a POST request. — hughes, Jul 06 '11 at 14:39

score 0 · Answer 1 · answered Jul 23 '13 at 03:02

You could create an empty div and create a class with the background-image property set to your image. Then, using jQuery or Dojo, add the class to your div.

.myImage {
  background-image: url(image.png);
  background-repeat: no-repeat;
}

<div id="myDiv"></div>

$('#myDiv').addClass('myImage');

score 0 · Answer 2 · edited May 23 '17 at 12:21

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.

Embed the desired HTML into SVG as a foreign object.
Draw the image. (These two steps are summarized here 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 )
Obtain the canvas data using getImageData()
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 toDataURL)

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.

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

(Enlarged 20x: http://www.codelib.net/html/foo.png )

Stealing from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement to show you an example of using toDataURL to output PNG image data:

function test() {
 var canvas = document.getElementById("canvas");
 var url = canvas.toDataURL();

 var newImg = document.createElement("img");
 newImg.src = url;
 document.body.appendChild(newImg);
}

Another way is to build upon the work done by html2canvas:

create screenshot of webpage using html2canvas (unable to initialize properly)

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.

Is there in Jquery or Dojo or plain JavaScript way to convert div to image?

2 Answers2