Question

有没有办法将HTML Div及其相关元素转换为画布，将画布转换为图像使用Jquery？我已经看了下面的网站，它只会转换整个HTML页面并渲染到body.Can任何人都可以帮我找到它。

Answer 1

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

<强>结果：

demo

让我们定义一些我们想要呈现的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>

现在我们可以构建一个内联SVG，并使用第一个div标签的html 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作为参数的函数，并处理外部内容和图像。

Answer 2

抱歉，浏览器不会将HTML呈现到画布中。

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

要从HTML获取画布，您必须使用drawImage和fillText从头开始编写自己的HTML渲染器，这是一项潜在的巨大任务。有one such attempt here但它有点狡猾，离完成还有很长的路要走。（它甚至尝试从头开始解析HTML / CSS，我认为这很疯狂！从应用了样式的真实DOM节点开始更容易，并使用getComputedStyle和部件的相对位置读取样式使用offsetTop et al。）

将div及其相关元素转换为canvas jquery？

2 个答案: