Wie kann ich ein HTML-Element in ein Canvas-Element umwandeln?

Question 1

Es wäre unglaublich nützlich, ein reguläres Element vorübergehend in ein umwandeln zu können canvas. Angenommen, ich habe ein gestyltes div dass ich umdrehen möchte. Ich möchte eine Leinwand dynamisch erstellen, die “rendern”. HTMLElement in die Leinwand, blenden Sie das ursprüngliche Element aus und animieren Sie die Leinwand.

Kann es getan werden?

Question 2

Es gibt eine Bibliothek, die versucht, das zu tun, was Sie sagen.

Sehen Sie sich diese Beispiele an und erhalten Sie den Code

http://hertzen.com/experiments/jsfeedback/

http://html2canvas.hertzen.com/

Liest das DOM aus dem HTML und rendert es auf eine Leinwand, schlägt bei einigen fehl, funktioniert aber im Allgemeinen.

Question 3

Entschuldigung, der Browser rendert HTML nicht in eine Zeichenfläche.

Es wäre ein potenzielles Sicherheitsrisiko, wenn Sie könnten, da HTML Inhalte (insbesondere Bilder und Iframes) von Websites Dritter enthalten kann. Wenn canvas HTML-Inhalt in ein Bild umwandeln und dann die Bilddaten lesen könnten, könnten Sie möglicherweise privilegierten Inhalt von anderen Websites extrahieren.

Um eine Leinwand aus HTML zu erhalten, müssten Sie im Grunde Ihren eigenen HTML-Renderer von Grund auf neu schreiben drawImage und fillText, was eine potentiell riesige Aufgabe ist. Es gibt ein solcher Versuch hier aber es ist ein bisschen zwielichtig und noch lange nicht fertig. (Es versucht sogar, das HTML/CSS von Grund auf neu zu analysieren, was ich für verrückt halte! Es wäre einfacher, von einem echten DOM-Knoten mit angewendeten Stilen aus zu beginnen und das Styling zu lesen getComputedStyle und relative Positionen von Teilen davon mit offsetTop et al.)

Question 4

Sehen Sie sich dieses Tutorial an MDN: https://developer.mozilla.org/en/HTML/Canvas/Drawing_DOM_objects_into_a_canvas (archiviert)

Sein Schlüsseltrick war:

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;

Das heißt, es wurde ein Temporär verwendet SVG-Bild die einzubeziehen HTML content als “Fremdelement” und rendert dieses SVG-Bild dann in ein Canvas-Element. Es gibt jedoch erhebliche Einschränkungen hinsichtlich dessen, was Sie auf diese Weise in ein SVG-Bild einfügen können. (Weitere Informationen finden Sie im Abschnitt „Sicherheit“ – im Grunde ist es aufgrund von Datenschutz- und domänenübergreifenden Bedenken viel eingeschränkter als ein Iframe oder AJAX.)

Question 5

Aufbauend auf dem Mozdev-Beitrag, auf den natevw verweist, habe ich ein kleines Projekt gestartet, um HTML in Firefox, Chrome und Safari auf Leinwand zu rendern. So können Sie beispielsweise einfach Folgendes tun:

rasterizeHTML.drawHTML('<span class="color: green">This is HTML</span>' 
                     + '<img src="https://stackoverflow.com/questions/2732488/local_img.png"/>', canvas);

Quellcode und ein umfangreicheres Beispiel ist Hier.

Question 6

Sie können verwenden Dom-zu-Bild Bibliothek (ich bin der Betreuer).
So könnten Sie Ihr Problem angehen:

var parent = document.getElementById('my-node-parent');
var node = document.getElementById('my-node');

var canvas = document.createElement('canvas');
canvas.width = node.scrollWidth;
canvas.height = node.scrollHeight;

domtoimage.toPng(node).then(function (pngDataUrl) {
    var img = new Image();
    img.onload = function () {
        var context = canvas.getContext('2d');

        context.translate(canvas.width, 0);
        context.scale(-1, 1);
        context.drawImage(img, 0, 0);

        parent.removeChild(node);
        parent.appendChild(canvas);
    };

    img.src = pngDataUrl;
});

Und hier ist jsfiddle

Question 7

Nichts dergleichen, tut mir leid.

Obwohl die Spezifikation besagt:

Eine zukünftige Version der 2D-Kontext-API bietet möglicherweise eine Möglichkeit, Fragmente von Dokumenten, die mit CSS gerendert wurden, direkt auf die Leinwand zu rendern.

Was so nah wie möglich sein kann.

Viele Leute wollen a ctx.drawArbitraryHTML/Element Art von Deal, aber so etwas ist nicht eingebaut.

Die einzige Ausnahme ist die exklusive von Mozilla drawWindow, die eine Momentaufnahme des Inhalts eines DOM-Fensters in den Zeichenbereich zeichnet. Diese Funktion ist nur für Code verfügbar, der mit Chrome-Berechtigungen (“nur lokal”) ausgeführt wird. In normalen HTML-Seiten ist es nicht erlaubt. Sie können es also zum Schreiben von Firefox-Erweiterungen wie verwenden dieser tut es aber das ist es.

Question 8

Sie könnten sich die Transformationen ersparen, die Sie gebrauchen könnten CSS3-Übergänge umdrehen <div>‘s und <ol>‘s und jedes gewünschte HTML-Tag. Hier sind einige Demos mit Quellcode erklärt, zu sehen und zu lernen: http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/

Wie kann ich ein HTML-Element in ein Canvas-Element umwandeln?

…

…