Possible Duplicate:
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>
最佳答案
您可以使用 SVG 来做到这一点.
示例:
<?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>
或者在你拥有的之后:
<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); }
希望这对您有帮助。取自Mozilla Docs
关于javascript - 有没有办法以编程方式将 DIV 中的内容导出到图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8569842/