2

有什么方法可以使用 Jquery 将 HTML Div 及其相关元素转换为画布并将画布转换为图像？我已经看过以下网站，它只会将整个 HTML 页面转换为正文。谁能帮我找出来。

4

2 回答 2

2

您可以通过 SVG 及其foreignObject. 这在您无法以任何方式渲染图像或外部源的方式上受到限制（您需要提取它们并稍后单独渲染它们）。

在线演示在这里

结果：

演示

让我们定义一些我们想要渲染的 HTML：

<div id="html">
    <div style="border:2px dotted #f73;font:12px sans-serif">
        <em>This</em> is
        <span style="color:#00f;border:1px solid #777;padding:0 4px">HTML</span>
        drawn into <strong>canvas</strong>
    </div>
</div>

html现在我们可以构建一个内联 SVG 并使用第一个 div 标签的 id添加这个 html ：

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
           "<foreignObject width='100%' height='100%'>" +
           "<div xmlns='http://www.w3.org/1999/xhtml'>" + 

           /// extract the html content of div
           document.getElementById('html').innerHTML +

           "</div>" +
           "</foreignObject>" +
           "</svg>";

下一步是构建一个Blob对象，以便我们可以将 SVG 作为 url 引用，以便在我们将其绘制为图像的画布中使用：

var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"} );

/// create an url that we can use for the image tag
var url = DOMURL.createObjectURL(svg);
img.onload = function () {

    /// now we can draw the "html" to canvas.
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
};
img.src = url;

您可以将其包装到一个函数中，该函数将 id 和 canvas 作为参数并处理外部内容和图像。

于 2013-10-11T07:50:39.910 回答
0

抱歉，浏览器不会将 HTML 渲染到画布中。

如果可以的话，这将是一个潜在的安全风险，因为 HTML 可以包含来自第三方站点的内容（特别是图像和 iframe）。如果canvas可以将 HTML 内容转换为图像，然后您读取图像数据，您可能会从其他站点提取特权内容。

要从 HTML 中获取画布，您基本上必须使用drawImageand从头开始​​编写自己的 HTML 渲染器fillText，这可能是一项艰巨的任务。这里有一个这样的尝试，但它有点狡猾，距离完成还有很长的路要走。（它甚至尝试从头开始解析 HTML/CSS，我认为这很疯狂！从应用了样式的真实 DOM 节点开始，并使用et al读取样式getComputedStyle和其中部分的相对位置会更容易offsetTop.)

于 2013-10-11T07:19:20.673 回答