3

htmlテーブル要素を画像として保存する必要があるプロジェクトがあります。これを行う最良の方法は、テーブルのデータをキャンバスに変換してから、toDataURLを呼び出して画像を取得することです。ここに記載されている多くのテーブルを検索したところ、すべてのテーブルが通常のhtmlテーブルの周りにラッパーを配置して見栄えを良くしているように見えます。

  1. キャンバス要素内に表形式でデータを描画するための簡単な方法またはライブラリ（これは派手ではありません）はありますか？
  2. テーブル要素の内容を画像に保存するために欠けている別の方法はありますか？

これはRailsプロジェクトなので、JSライブラリでJQueryを使用したほうがいいと思います。

編集

表の一部のエントリがリンクであることを忘れました。明らかに、これは通常のhtmlテーブルでうまく機能しますが、キャンバスバージョンでも機能する必要があります。

編集2

どうやら私は最初の編集で明確ではありませんでした。ユーザーに表示されるバージョン（テーブルまたはキャンバス）には、リンクが必要です。最終的な画像は、明らかにそうではありません。

4

1 に答える 1

9

次に例を示します（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に画像を表示することだけです。

于 2013-02-11T17:25:17.400 に答える