将HTML元素呈现到<；帆布>；

有没有办法在画布中呈现任意HTML元素（然后访问其缓冲区…。

根据HTML规范，您无法访问画布的元素。你可以获取它的上下文，并在其中绘制和操纵它，但仅此而已

但是，您可以将Canvas和html元素放在同一个div中，并使用

位置：relative

，然后将Canvas和其他元素设置为

位置：absolute

。 这样他们就可以互相领先了。然后您可以使用

left

和

right

CSS属性来定位html元素

---

如果元素没有显示，可能画布就在它之前，因此使用

z-index

CSS属性将其置于画布之前。

您当前无法获得真正的HTML呈现，因为画布上下文没有呈现HTML元素的函数

有一些模拟：

html2canvas项目（基本上是在Javascript+画布上构建的HTML呈现程序）

根据您的使用情况，从HTML到SVG再到

可能是可行的：

另外，如果您使用Firefox权限，然后将DOM窗口呈现到

看一看

它将使用创建SVG图像来呈现html元素

例如： 有

我喜欢奶酪

HTML元素。我想把它添加到

画布元素中

下面是将HTML元素添加到画布的Javascript代码

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var数据=“”+
'' +
'' +
“我喜欢奶酪”+
'' +
'' +
'';
var DOMURL=window.URL | | window.webkitURL | | window；
var img=新图像（）；
var svg=新的Blob（[data]{
键入：“image/svg+xml；charset=utf-8”
});
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
}
img.src=url
光栅化HTML是一个非常好的项目，但是如果你需要访问画布，它在chrome上是不起作用的。由于使用了

如果需要访问画布，则可以使用html2canvas

我正在寻找另一个项目，因为html2canvas的性能非常慢
以下是将任意HTML渲染到画布中的代码：

function render_html_to_canvas(html, ctx, x, y, width, height) {
    var xml = html_to_xml(html);
    xml = xml.replace(/\#/g, '%23');
    var data = "data:image/svg+xml;charset=utf-8,"+'<svg xmlns="http://www.w3.org/2000/svg" width="'+width+'" height="'+height+'">' +
                        '<foreignObject width="100%" height="100%">' +
                        xml+
                        '</foreignObject>' +
                        '</svg>';

    var img = new Image();
    img.onload = function () {
        ctx.drawImage(img, x, y);
    }
    img.src = data;
}

function html_to_xml(html) {
    var doc = document.implementation.createHTMLDocument('');
    doc.write(html);

    // You must manually set the xmlns if you intend to immediately serialize     
    // the HTML document to a string as opposed to appending it to a
    // <foreignObject> in the DOM
    doc.documentElement.setAttribute('xmlns', doc.documentElement.namespaceURI);

    // Get well-formed markup
    html = (new XMLSerializer).serializeToString(doc.body);
    return html;
}

函数将html渲染到画布（html、ctx、x、y、宽度、高度）{
var xml=html到xml（html）；
xml=xml.replace（/\\\\/g，'%23'）；
var data=“data:image/svg+xml；charset=utf-8，”+“”+
'' +
xml+
'' +
'';
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，x，y）；
}
img.src=数据；
}
函数html_to_xml（html）{
var doc=document.implementation.createHTMLDocument（“”）；
doc.write（html）；
//如果要立即序列化，必须手动设置xmlns
//将HTML文档添加到字符串，而不是将其附加到
//在DOM中
doc.documentElement.setAttribute（'xmlns'，doc.documentElement.namespaceURI）；
//获取格式良好的标记
html=（新的XMLSerializer）.serializeToString（doc.body）；
返回html；
}

例如：


const ctx=document.querySelector（'canvas'）.getContext（'2d'）；
常量html=`
这个
不是
xml！
`)；
将html渲染到画布（html、ctx、0、0、300、150）；
函数将html渲染到画布（html、ctx、x、y、宽度、高度）{
var data=“data:image/svg+xml；charset=utf-8，”+“”+
'' +
html到xml（html）+
'' +
'';
var img=新图像（）；
img.onload=函数（）{
ctx.drawImage（img，x，y）；
}
img.src=数据；
}
函数html_to_xml（html）{
var doc=document.implementation.createHTMLDocument（“”）；
doc.write（html）；
//如果要立即序列化，必须手动设置xmlns
//将HTML文档添加到字符串，而不是将其附加到
//在DOM中
doc.documentElement.setAttribute（'xmlns'，doc.documentElement.namespaceURI）；
//获取格式良好的标记
html=（新的XMLSerializer）.serializeToString（doc.body）；
返回html；
}
CSS最终可能会帮助这里的一些人，尽管它不是问题的直接答案。它允许您使用一个元素（以及所有子元素，包括视频、跨域iFrame等）作为背景图像（以及您通常在CSS代码中使用的
url（…）
）。这表明你可以用它做什么

自2011年以来，它已经在Firefox中实现，并且在Chrome/Chrome中（如果您关心此功能，请不要忘记给问题加上一个星星）。
您应该检查一下。对不起，可能我没有非常准确地说明。。。我的意思是：有可能在frambuffer画布上呈现html元素吗？嗨，你的答案似乎有点混乱（“因为使用了“什么？”）。可能缺少了一些内容？目前（截至2016年5月25日），html2canvas存在缺陷（例如，为我生成了一个0x0画布；当我将画布固定为一定大小时，画布上没有生成可见的HTML文本）。我试图修复它，但这并不容易，所以我放弃了。@EvgeniPhilippov:这听起来像个bug，应该向相关的问题跟踪者报告。这个项目很受欢迎，它可以为多个用户工作。如果有什么东西不适合你，那么应该正确地报告。html2canvas似乎完全超出了用大约20行代码就可以完成的事情……虽然这对你的示例有效，但它对任意html都不起作用，因为你需要将html转换为xml。如果我们想做一个具有子级图像的div呢？当我这样做时，图像不会显示。我遗漏了什么？@Jess你必须把代码放在里面，让其他来这里寻求启示的人知道：
foreignObject
在IE中不受支持。@CpnCrunch arbi怎么样