Kurzversion: Muss ich dem DOM-Baum grafische DOM-Knoten hinzufügen, um sie in einer Grafikpipeline zu verwenden?Grafikelemente außerhalb des DOM-Baums
Es gibt viele Möglichkeiten, wie ein HTML5 Webapp grafische DOM-Elemente für andere Zwecke als die sichtbar, sie in der DOM-Struktur verwenden kann:
- ein
<video>
Element capture a webcam stream verwendet werden könnte, und den aktuellen Frame laden into a WebGL texture an einige<canvas>
befestigt. - Ein
<canvas>
Element kann verwendet werden, um ein Off-Screen-Bild (mit 2D-Grafiken oder WebGL) vorzubereiten, das dann in andere<canvas>
mit a global alpha applied to the content as a whole zusammengesetzt werden kann. - ein
<img>
kann zu einem<canvas>
gezogen werden, um access to its individual pixels zu gewinnen, oder in PNG von was auch immer es ursprünglich zu sein, zu konvertieren.
Im Großen und Ganzen würde ich sagen CanvasImageSource und TexImageSource konsequent <img>
nennen, <video>
und <canvas>
als Bildquellen relevant zu meiner Frage, und die 2d und WebGL Kontexte <canvas>
als Ziele.
Gibt es in der Spezifikation oder in der Praxis die Anforderung, das Quellelement, das Zielelement oder beide an den DOM-Baum des aktuellen Dokuments anzuhängen, damit diese Verarbeitungsschritte funktionieren?
Bisher habe ich noch kein Kompatibilitätsproblem aufgrund der Arbeit mit nicht verbundenen Elementen festgestellt. Aber ich tendiere dazu, mich auf modernen Browsern zu entwickeln, ich habe keinen riesigen Maschinenpark, um Tests durchzuführen, und bisher war ich konservativ und fügte Knoten in den Baum ein (mit css Sichtbarkeit), um auf der sicheren Seite zu sein . Es wäre großartig, eine verlässliche Richtlinie dazu zu haben, vorzugsweise aus einer verbindlichen Spezifikation, aber einige einigermaßen umfassende Tests wären auch großartig. Kennen Sie solche Richtlinien?
(Bonus Frage: Gibt es eine Spezifikation Entscheidung, ob man oben beschriebenen verschiedenen Dokumenten erstellt grafische Elemente für die Verwendung der Techniken kombinieren?)
Canvas kann vollständig im Speicher verwendet werden, ohne es dem DOM hinzuzufügen. Sie können die Methode 'context.toDataURL' verwenden, um Ihre Ergebnisse zu exportieren. – markE