Question

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

考虑到应用于文本的所有样式，我想在HTML5 canvas元素上“传输”此文本内容。有可能吗？

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

Answer 1

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

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

Rendering HTML elements to <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);
            }
        });
    });
});

在HTML5画布上绘制css圆柱文本

1 个答案: