在HTML5 Canvas中创建表

Question

我有一个项目,我需要将html表元素保存为图像.看来最好的方法是将表中的数据转换为画布,然后调用toDataURL来获取图像.在搜索了这里提到的很多表后,看起来所有这些表只是在常规的html表中放置一个包装器,使它看起来更漂亮.

1. 是否有任何简单的方法或库(这不是花哨)在canvas元素中以表格格式绘制数据？
2. 我还缺少另一种将表元素的内容保存到图像的方法吗？

由于这是一个Rails项目,我更喜欢JS库使用JQuery.

编辑

我忘了提到表中的一些条目是链接.显然这在常规的html表中运行良好,但它也需要在canvas版本中工作.

编辑2

显然我在第一次编辑时并不清楚.显示给用户的版本(无论是表格还是画布)需要有链接.显然,最终的图像不会.

Answer 1

这是一个例子(修改自: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中显示图像.