有没有对内容的DIV输出以编程图像的方法吗？ [英] Is there a way to export the content in DIV to a image programmatically?
本文介绍了有没有对内容的DIV输出以编程图像的方法吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
可能重复：结果
以一个网页的截图与JavaScript？我希望在DIV的内容导出以编程的形象？我能怎么做？其中code能做到这一点，服务器code或客户端code？
谢谢！＆LT;！DOCTYPE HTML PUBLIC - // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd＆GT;＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;＆LT; /标题＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆所述;格ID =A＆GT;
内容导出到图像
＆LT; / DIV＆GT; ＆所述;格ID =B＆GT;
普通文本
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案您可以做到这一点使用的 SVG 。
例如：
＆LT;？XML版本=1.0独立=YES＆GT？;
＆LT; SVG的xmlns =http://www.w3.org/2000/svg\">
＆所述; foreignobject X =120Y =120的宽度=180HEIGHT =180＆GT;
＆LT;车身的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; DIV＆GT;
某物
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / foreignobject＆GT;
＆LT; / SVG＆GT;或之后是否有什么：
＆LT;帆布ID =画布WIDTH =200HEIGHT =200＆GT;＆LT; /帆布＆GT;
＆LT;脚本＆GT;
VAR帆布=的document.getElementById（画布上）;
变种CTX = canvas.getContext（2D）;
VAR数据=数据：图像/ SVG + XML，+
＆LT; SVG的xmlns =HTTP：//www.w3.org/2000/svgWIDTH =200HEIGHT =200＆gt;中+
＆LT; foreignObject WIDTH =100％HEIGHT =100％＆gt;中+
的document.getElementById（'A'）。innerHTML的+
＆所述; / foreignObject＆gt;中+
＆所述; / SVG＆gt;中;
VAR IMG =新的图像（）;
img.src =数据;
img.onload =函数（）{ctx.drawImage（IMG，0，0）; }希望这有助于你。从 Mozilla的文档
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>
解决方案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
这篇关于有没有对内容的DIV输出以编程图像的方法吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
