Is there a way to export the content in DIV to a image programmatically?

Question

Possible Duplicate:
Take a screenshot of a webpage with javascript?

I hope to export the content in DIV to a image programmatically? How can I do? which code can do that ,server code or client code? Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
     <div id="a">
       Content to export to image
     </div>

     <div id="b">
       Normal text
     </div>
</body>
</html>

[http://stackoverflow.com/questions/60455/take-a-screenshot-of-a-webpage-with-javascript](http://stackoverflow.com/questions/60455/take-a-screenshot-of-a-webpage-with-javascript) — Will, Dec 20 '11 at 01:45

score 2 · Accepted Answer · answered Dec 20 '11 at 01:46

You can do that using SVG.

Example:

<?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
  <foreignobject x="120" y="120" width="180" height="180">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        Something
      </div>
    </body>
  </foreignobject>
</svg>

Or after what you have:

<canvas id="canvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "data:image/svg+xml," +
           "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               document.getElementById('a').innerHTML +
             "</foreignObject>" +
           "</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }

Hope this helps you. Taken from Mozilla Docs

Is there a way to export the content in DIV to a image programmatically?

1 Answers1

Linked