jquery - 我可以在 canvas 元素中绘制表格吗？

Question

有没有办法(插件、工作解决方案等)绘制 HTML table进入 <canvas>元素？

我有一个格式丰富的 html 表格(使用 CSS )，我想使用 jQuery 将其保存为图像(PNG、SVG 或 GIF) . ...或者如果有任何最简单的方法，我正在听。

Answer 1

Working DEMO

当然，这是可能的。您可以将 DOM 对象绘制到 Canvas 中。这是您需要的代码:

<p><canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var data = "<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:40px'>" +
                  "<table border='1'><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;
</script>​

You can find more information here on Mozilla Developer Network