Home/ Questions/Q 6960577
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T15:25:10+00:00

Possible Duplicate: Take a screenshot of a webpage with javascript? I hope to export

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0