DIV의 내용을 이미지로 프로그래밍 방식으로 내보내는 방법이 있습니까?

가능한 중복 : 나는 프로그래밍 방식으로 이미지에 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>

출처

2011-12-20 Anonymous

[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

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

출처

2011-12-20 01:46:13

DIV의 내용을 이미지로 프로그래밍 방식으로 내보내는 방법이 있습니까?

답변

관련 문제