Question

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

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

由于这是一个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中显示图像。

在HTML5 Canvas中创建表

1 个答案: