Lösung für das Problem, dass HTML2-Canvas-SVG nicht erkannt wird

Lösung für das Problem, dass HTML2-Canvas-SVG nicht erkannt wird

Es gibt eine neue Funktion, die das Erfassen einer Webseite als Bild erfordert. Daher habe ich das beliebte html2canvas verwendet. Ich dachte, ich könnte es problemlos machen, aber später stellte ich fest, dass die Verbindungslinien des Flussdiagramms auf der Webseite nicht im Screenshot enthalten waren. Ich habe also viel auf Baidu und Bing gesucht, aber es scheint, dass es keinen vollständigen Code gibt. Jetzt habe ich es selbst gelöst und teile den Code.

Zuerst müssen Sie canvg.js herunterladen, GitHub-Adresse: https://github.com/canvg/canvg

Funktion showQRCode() {
                scrollenZu(0, 0);
               
                wenn (Typ von html2canvas !== 'undefiniert') {
                    //Das Folgende ist die Verarbeitung von svg var nodesToRecover = [];
                    var nodesToRemove = [];
                    var svgElem = $("#divReport").find('svg'); //divReport ist die ID des Doms, das als Bild erfasst werden muss
                    svgElem.each(Funktion (Index, Knoten) {
                        var übergeordneter Knoten = Knoten.übergeordneter Knoten;
                        var svg = node.outerHTML.trim();

                        var Leinwand = Dokument.createElement('Leinwand');
                        canvg(Leinwand, SVG); 
                        wenn (Knoten.Stil.Position) {
                            Leinwand.Stil.Position += Knoten.Stil.Position;
                            Leinwand.Stil.links += Knoten.Stil.links;
                            canvas.style.top += node.style.top;
                        }

                        nodesToRecover.push({
                            übergeordneter Knoten: übergeordneter Knoten,
                            Kind: Knoten
                        });
                        übergeordneter Knoten.entfernenUntergeordnetesElement(Knoten);

                        nodesToRemove.push({
                            übergeordneter Knoten: übergeordneter Knoten,
                            Kind: Leinwand
                        });

                        parentNode.appendChild(Leinwand);
                    });
                    html2canvas(document.querySelector("#divReport"), {
                        onrendered: Funktion (Leinwand) {
                            var base64Str = canvas.toDataURL(); //Base64-Code, kann in Bild konvertiert werden//...

                            $('<img>',{src:base64Str}).appendTo($('body'));//Direkt auf der Originalwebseite anzeigen} }); } }

Dies ist das Ende dieses Artikels über die Lösung für das Problem, dass HTML2+Canvas SVG nicht erkannt wird. Weitere verwandte Inhalte zum Thema „HTML2 Canvas SVG wird nicht erkannt“ finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  JavaScript zur einfachen Verknüpfung von Provinzen und Gemeinden

>>:  Schritte zur Installation von MySQL mit Docker unter Linux

Artikel empfehlen

vue-cli4.5.x erstellt schnell ein Projekt

1. Installieren Sie vue-cli npm ich @vue/cli -g 2...

Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell

Wie oben gezeigt, sind Füllwerte zusammengesetzte...

Warum sollte CSS im Head-Tag platziert werden?

Denken Sie darüber nach: Warum sollte css im head...

Detaillierte Erklärung zur Verwendung der Vue h-Funktion

Inhaltsverzeichnis 1. Verstehen 2. Verwendung 1. ...

JavaScript implementiert die asynchrone Erfassung von Formulardaten

In diesem Artikelbeispiel wird der spezifische Co...

So implementieren Sie eine einfache Datenüberwachung mit JS

Inhaltsverzeichnis Überblick erster Schritt Schri...

Eine Zeile CSS-Code, die Chrome zum Absturz bringt

Allgemeiner CSS-Code verursacht nur geringfügige ...

Native JavaScript-Karussell-Implementierungsmethode

In diesem Artikel wird die Implementierungsmethod...

MySQL-Datenbankterminal – allgemeine Befehlscodes für Vorgänge

Inhaltsverzeichnis 1. Benutzer hinzufügen 2. Ände...

Methoden des adaptiven Webdesigns (gutes Zugriffserlebnis auf Mobiltelefonen)

1. Fügen Sie dem HTML-Header das Viewport-Tag hin...