css - 在 HTML5 画布上绘制 css 列文本

Question

我有一个 div，其中包含用 css 列设置样式的文本。

考虑到应用于文本的所有样式，我想在 HTML5 画布元素上“传输”此文本内容。是否可以？

现在我发现我只能使用所需的字体样式在画布的 2D 上下文中绘制一些文本，但没有关于如何在画布上绘制具有复杂布局的文本。

Answer 1

看来这不是一件小事。我认为它也可能会引入一些安全/隐私问题。

无论如何，我发现这些信息似乎至少有一些（尽管不是全部）渲染能力：

将 HTML 元素渲染到 <canvas>

我在这里找到的“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);
            }
        });
    });
});