我如何使用 jquery 在 html5 画布上绘制 DIV 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10932670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do i draw the content of DIV on html5 canvas using jquery
提问by Thomas
Suppose I have div and inside that div I have few form controls like textboxes,dropdow checkbox,radiobutton etc. Now I want that when a user clicks a particular button, the content of div will be drawn on the canvas. I search google for having some sample code or example but found none. Please guide me how could I draw the content of DIV on html5 canvas using jquery with as it is the controls looks with style sheet.
假设我有 div 并且在那个 div 里面我有几个表单控件，如文本框、下拉复选框、单选按钮等。现在我希望当用户单击特定按钮时，div 的内容将被绘制在画布上。我在谷歌上搜索了一些示例代码或示例，但没有找到。请指导我如何使用 jquery 在 html5 画布上绘制 DIV 的内容，因为它是带有样式表的控件外观。
Question updated
问题已更新
<div class="login">
<form method="post" action="www.mysite.com">
<fieldset>
<div class="login-fields"><label class="" for="username" id="username-lbl">User Name</label>
<input type="text" size="25" class="validate-username" value="" id="username" name="username"></div>
<div class="login-fields"><label class="" for="password" id="password-lbl">Password</label>
<input type="password" size="25" class="validate-password" value="" id="password" name="password"></div>
<button class="button" type="submit">Log in</button>
</fieldset>
</form>
</div>
Suppose I have a form like above which I need to draw programmatically on canvas by jquery and look & feel of my form will be same.
假设我有一个像上面这样的表单，我需要通过 jquery 以编程方式在画布上绘制，并且表单的外观和感觉将相同。
UPDATE
更新
var domElement = document.getElementById('myElementId');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.createElement('canvas');
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 100, 100);
// do something with canvas
}
}
回答by jazzytomato
There is a solution for chrome : https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawWindow()
chrome 有一个解决方案：https: //developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawWindow()
But I think that what you need is to use xml + svg; here is an example : http://jsfiddle.net/3N69j/
但我认为你需要的是使用 xml + svg；这是一个例子：http: //jsfiddle.net/3N69j/
code :
代码 ：
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%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:12px'>" +
"<ul> <li style='color:red'> hello </li> <li style='color:green'>thomas</li> </ul> " +
"</div>" +
"</foreignObject>" +
"</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }
You get the html code easily with jquery (on click, use $(this).html() and feed the svg data
您可以使用 jquery 轻松获取 html 代码（单击时，使用 $(this).html() 并提供 svg 数据
good luck
祝你好运
回答by Mikhail
Check out HTML-2-Canvas. I've gotten it to work rather well. Seems to work on Android cellphones too.
查看HTML-2-Canvas。我已经让它工作得很好。似乎也适用于 Android 手机。
