我可以在canvas元素中绘制一个表吗？ [英] Can I draw a table in canvas element?

问题描述

有没有办法（插件，工作解决方案等）将 HTML 表绘制成< canvas> 元素？

Is there any way (plugins, working solutions, etc.) to draw a HTML table into a <canvas> element?

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

I have a rich-formatted html table (using CSS), and I want to save it as image (PNG, SVG or GIF) using jQuery. ...or if there any simpliest way, I'm listening it.

推荐答案

工作演示

当然，有可能。您可以将DOM对象绘制到画布中。以下是您需要的代码：

Sure, it is possible. You can draw DOM objects into a canvas. Here is the code you need:

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

您可以在此处找到有关Mozilla开发者网络的更多信息

这篇关于我可以在canvas元素中绘制一个表吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！