如何使用jQuery在HTML5画布上绘制DIV的内容

Question

假设我有一个div，里面有一些表单控件，比如文本框、下拉框、复选框、单选按钮等。现在我想当用户点击特定按钮时，div的内容会被绘制到画布上。我搜索谷歌以获取一些示例代码或示例，但没有找到。请指导我如何使用jQuery将DIV的内容绘制到HTML5画布上，并保留控件的样式表。

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

假设我有一个表单，如上所示，我需要通过jquery在画布上以编程方式绘制它，并且我的表单外观将是相同的。

更新

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

- Thomas

---

你能在画布上绘制一个简单的HTML控件吗？就像任何控件一样？ - U.P

如果我能或者已经知道，为什么还要在这里问呢？ - Thomas

明白了。一开始没听懂你的问题。 - U.P

https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas - Thomas

Answer 1

对于Chrome浏览器，有一个解决方案：https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawWindow()

但我认为你需要使用xml + svg；这里有一个示例：http://jsfiddle.net/3N69j/

代码：

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

通过使用 jQuery 可以轻松获取 HTML 代码（在单击事件中使用 $(this).html() 并提供 SVG 数据即可）。

祝你好运！

- jazzytomato

---

我问了如何在任何div中绘制任何表单元素。我看到了你的代码，它可以工作，但是当我在div中包含一个文本框时，就没有输出了。你能看一下吗？谢谢。 - Thomas

请编辑您的答案并将HTML代码放入要绘制到画布上的DIV中。 - jazzytomato

我已经更新了我的问题。请看一下并告诉我如何使用jQuery在画布上绘制上述表格。谢谢。 - Thomas

Answer 2

请看HTML-2-Canvas。我已经成功使用它了。似乎在安卓手机上也可以使用。

- Mikhail