css - HTML5 キャンバスに css コラム付きテキストを描画する

Question

CSS 列でスタイル設定されたテキストを含む div があります。

テキストに適用されるすべてのスタイルを考慮して、このテキスト コンテンツを HTML5 キャンバス要素に「転送」したいと考えています。出来ますか？

今のところ、希望のフォント スタイルを使用してキャンバスの 2D コンテキストでテキストを描画できることはわかっていますが、キャンバス上に複雑なレイアウトでテキストを描画する方法については何も知りません。

Answer 1

これは簡単なことではないようです。また、セキュリティ/プライバシーの問題も発生する可能性があると思います.

いずれにせよ、すべてではありませんが一部のレンダリング機能を備えているように見えるこの情報を見つけました。

<canvas> への HTML 要素のレンダリング

ここにある「html2canvas」で最も成功しました： http://html2canvas.hertzen.com/documentation.html#how-it-works

そして試してみましたが、これはこのフィドルでうまく機能します: http://jsfiddle.net/UdESC/1/

外部スクリプト: http://html2canvas.hertzen.com/build/html2canvas.js

HTML:

<button id="exec">Exec</button>
<p>Input:</p>
<div id="abc">
    <p>This is a test</p>
    <table>
        <tbody>
            <tr>
                <td>Col1</td>
                <td>Col2</td>
            </tr>
            <tr>
                <td>Col1 data sdafaksfhalsj</td>
                <td>Col2 data 3289rh982h</td>
            </tr>
        </tbody>
    </table>
</div>
<p>Output:</p>
<div id="output">
</div>

CSS:

#abc {
    border: 1px solid #999;
}

JS:

$(document).ready(function () {
    $("#exec").click(function () {
        html2canvas($("#abc"), {
            onrendered: function(canvas) {
                // canvas is the final rendered <canvas> element
                $("#output").empty();
                $("#output").append(canvas);
            }
        });
    });
});