Code für Konvertierungsideen zwischen SVG-Leinwand und Bildern in HTML5_HTML5-Tutorial-Fähigkeiten-H5-Tutorial-php.cn

Code für Konvertierungsideen zwischen SVG-Leinwand und Bildern in HTML5_HTML5-Tutorial-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:48:31

Original

1338 Leute haben es durchsucht

Kürzlich bestand die Notwendigkeit, einen Teil des Inhalts der Webseite in Text umzuwandeln, die ursprüngliche Webseite als Anhang in ein PDF umzuwandeln und es per E-Mail an den Chef zu senden. Da es sich um eine Website vom Typ „Bericht“ handelt, ist die Steuerelemententwicklung in HTML5 nichts anderes als Canvas oder SVG. Hier haben wir mehrere Steuerelemente, die SVG verwenden, und SVG kann nicht normal im Textkörper von FoxMail-E-Mails angezeigt werden, daher haben wir darüber nachgedacht, SVG in Canvas zu konvertieren display , stellte aber später fest, dass die Leinwand nicht normal angezeigt werden konnte. Am Ende blieb mir nichts anderes übrig, als das Canvas-Tag erneut in ein Bildformat zu konvertieren, was das Problem schließlich löste. Im Folgenden finden Sie eine kurze Einführung in den Implementierungsprozess. Das Folgende ist ein SVG-Tag

Code kopieren

Der Code lautet wie folgt:

das SVG-Tag und der Inhalt:

var svgHtml = svgContainer.innerHTML();

Um SVG in Canvas zu konvertieren, müssen Sie das Plug-in canvg von Google verwenden, das von der offiziellen Website heruntergeladen werden kann oder direkt aus der Ferne zitiert

Der nächste Schritt besteht darin, die Methode canvg(canvasId,svgHtml) des Plug-Ins aufzurufen, um sie in Canvas zu konvertieren. Der erste Parameter dieser Methode ist die ID des Canvas-Tags und der zweite Parameter ist natürlich der Inhalt des SVG-Tags. Auf diese Weise wird SVG in ein Bild konvertiert, was noch einfacher ist

var imgSrc = document.getElementById( canvasId).toDataUrl("image/png");//Dies ist tatsächlich eine Konvertierung. Die Leinwand wird in ein Bild umgewandelt und alle Inhaltsdaten des Bildes werden wie folgt zurückgegeben:

Code kopieren

Code wie folgt:

Dies ist die Implementierungsmethode von svg->canvas->image. Dies ist immer noch sehr nützlich, da verschiedene Browser unterschiedliche Unterstützung für SVG und Canvas bieten Möglichkeit zur korrekten Darstellung, auch wenn wir am Ende nur Bilder verwenden können.