Le rendu des éléments HTML <canvas>

Vous n'obtiendrez pas de réel de rendu HTML de <canvas> en soi, actuellement, du fait de toile de contexte n'a pas de fonctions pour rendre les éléments HTML.

Il y a quelques émulations:

html2canvas projet http://html2canvas.hertzen.com/index.html (essentiellement un convertisseur HTML tentative construit sur Javascript + toile)

HTML au format SVG pour <canvas> pourrait être possible en fonction de votre cas d'utilisation:

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

Aussi, si vous utilisez Firefox vous pouvez pirater certains prolongée autorisations et ensuite rendre un DOM fenêtre de <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

Voici le code pour le rendu HTML arbitraire dans une toile:

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;
}

exemple:

JS:

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;
}

HTML:

<canvas></canvas>

Le CSS élément () function peut éventuellement aider certaines personnes ici, même si ce n'est pas une réponse directe à la question. Il permet l'utilisation d'un élément (et tous les enfants, y compris des vidéos, de la croix-domaine des iframes, etc.) comme une image de fond (et de n'importe où ailleurs que vous auriez normalement utiliser url(...) dans votre code CSS). Voici un post de blog qui montre ce que vous pouvez faire avec lui.

Il a été implémenté dans Firefox depuis 2011, et est être considéré comme dans Chrome/Chrome (n'oubliez pas de donner à la question une étoile si vous vous souciez de cette fonctionnalité).