在HTML5画布中创建表

Creating tables within an HTML5 Canvas

本文关键字：创建 布中 HTML5      更新时间：2023-09-26

我有一个项目，需要将html表元素保存为图像。似乎最好的方法是将表中的数据转换到画布中，然后调用toDataURL来获取图像。在搜索了这里提到的许多表之后，看起来所有的表都只是在一个普通的html表周围放置了一个包装器，使其看起来更美观。

  1. 有没有任何简单的方法或库（这不是很好）可以在画布元素中以表格格式绘制数据
  2. 我是否缺少另一种方法来将表元素的内容保存到图像中

由于这是一个Rails项目，我更希望JS库使用JQuery。

编辑

我忘了提一下表中的一些条目是链接。显然，这在普通html表中运行良好，但也需要在画布版本中运行。

编辑2

显然，我在第一次编辑时并不清楚。向用户显示的版本（无论是表还是画布）都需要有链接。显然，最终的图像不会。

以下是一个示例（修改自：https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas)

http://jsfiddle.net/StEcW/1/

$(function() {
    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%'>" + $("#mytable").html() +
        "</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;
});
<div id="mytable">
    <div xmlns="http://www.w3.org/1999/xhtml" style='font-size:12px'>      
        <table border=1 id="amytable">
            <tr>
                <td>Hello</td>
                <td>There</td>
            </tr>        
        </table>
    </div>
</div>

这工作得很好，但可以看到一些奇怪的CSS可能不太好用。至少，对我来说，在Chrome中，表格边框的显示方式不同。

编辑：当然，浏览画布实际上没有多大意义。画布只是在绘制我们已经创建的图像。您所需要做的就是在DOM中显示图像。

相关文章：