渲染HTML元素(Rendering HTML elements to )

有没有办法有一个任意的HTML元素在画布渲染（然后访问它的缓冲...）。

Answer 1:

你不会得到真正的HTML渲染<canvas>本身目前，因为帆布上下文不具备的功能来呈现HTML元素。

还有一些仿真：

html2canvas项目http://html2canvas.hertzen.com/index.html （基本上是一个HTML渲染尝试建于JavaScript +帆布）

HTML为SVG到<canvas>可能会根据你的使用情况是可能的：

https://github.com/miohtama/Krusovice/blob/master/src/tools/html2svg2canvas.js

此外，如果你使用的是Firefox ，你可以破解一些扩展权限，然后呈现一个DOM窗口<canvas>

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas?redirectlocale=en-US&redirectslug=Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

Answer 2:

采取一看MDN

它将使用创建SVG图像渲染HTML元素。

对于实施例：有<em>I</em> like <span style="color:white; text-shadow:0 0 2px blue;">cheese</span> HTML元素。 我想将其添加到<canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas> <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas>画布元素。

下面是JavaScript代码的HTML元素添加到画布上 。

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); 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" style="font-size:40px">' + '<em>I</em> like <span style="color:white; text-shadow:0 0 2px blue;">cheese</span>' + '</div>' + '</foreignObject>' + '</svg>'; var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' }); var url = DOMURL.createObjectURL(svg); img.onload = function() { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); } img.src = url; 

 <canvas id="canvas" style="border:2px solid black;" width="200" height="200"></canvas> 

Answer 3:

下面是程序代码来渲染任意HTML到画布：

function render_html_to_canvas(html, ctx, x, y, width, height) {
    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%">' +
                        html_to_xml(html)+
                        '</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;
}

例：

 const ctx = document.querySelector('canvas').getContext('2d'); const html = ` <p>this <p>is <span style="color:red; font-weight: bold;">not</span> <p><i>xml</i>! <p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABWElEQVQ4jZ2Tu07DQBBFz9jjvEAQqAlQ0CHxERQ0/AItBV9Ew8dQUNBQIho6qCFE4Nhex4u85OHdWAKxzfWsx0d3HpazdGITA4kROjl0ckFrnYJmQlJrKsQZxFOIMyEqIMpADGhSZpikB1hAGsovdxABGuepC/4L0U7xRTG/riG3J8fuvdifPKnmasXp5c2TB1HNPl24gNTnpeqsgmj1eFgayoHvRDWbLBOKJbn9WLGYflCCpmM/2a4Au6/PTjdH+z9lCJQ9vyeq0w/ve2kA3vaOnI6k4Pz+0Y24yP3Gapy+Bw6qdfsCRZfWSWgclCCVXTZu5LZFXKJJ2sepW2KYNCENB3U5pw93zLoDjNK6E7rTFcgbkGYJtiLckxCiw4W1OURsxUE5BokQiQj3JIToVtKwlhsurq+YDYbMBjuU/W3KtT3xIbrpAD7E60lwQohuaMtP8ldI0uMbGfC1r1zyWPUAAAAASUVORK5CYII=">`; render_html_to_canvas(html, ctx, 0, 0, 300, 150); function render_html_to_canvas(html, ctx, x, y, width, height) { 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%">' + html_to_xml(html) + '</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; } 

 <canvas></canvas> 

Answer 4:

RasterizeHTML是一个很好的项目，但如果你需要访问画布它不会对铬工作。 由于使用foreignObject的

如果您需要访问画布，那么你可以使用html2canvas

我试图找到另一个项目为html2canvas在性能上非常缓慢

Answer 5:

CSS的element()函数 ，最终可能帮助一些人在这里，即使它不是一个直接的问题的答案。 它可以让你使用一个元素（和所有儿童，包括视频，跨域iFrame等）作为背景图像（以及其他任何地方，你通常使用的url(...)在你的CSS代码）。 这里有一个博客文章显示，你可以用它做什么。

它已经在Firefox自2011年以来已经实施，并正在考虑在Chromium / Chrome浏览器（不要忘了给这个问题一个明星，如果你关心这个功能）。

Answer 6:

根据HTML规范，你不能访问画布的元素。 你可以得到它的上下文，并绘制在它操纵它，但仅此而已。

但是，你可以把双方的Canvas和html元素在同一div与AA position: relative ，然后设置画布和其他元素position: absolute 。 这方面，他们将在彼此的顶部。 然后你可以使用left和right CSS属性的HTML元素的位置。

如果元素没有显示出来，也许画布前，所以使用z-index CSS属性的画布前，把它。

文章来源: Rendering HTML elements to