2011-12-20 7 views
0

可能性の重複:私はプログラム的に画像にDIVのコンテンツをエクスポートしたいと考えてい
Take a screenshot of a webpage with javascript?DIVのコンテンツをプログラムでプログラムにエクスポートする方法はありますか?

?どのようにできるのか?どのコードでそれを行うことができますか、サーバーコードまたはクライアントコード? ありがとう!

<!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> 
+0

[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

答えて

2

これはSVGを使用して行うことができます。

例:これはあなたを助け

<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); } 

希望:

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

それともあなたは持っているものの後。から取られるMozilla Docs

関連する問題