HTML5-Canvas mit C# erstellen

In diesem Artikel zeige ich Ihnen, wie Sie mit C# das HTML5-Canvas-Element mit Grafiken generieren. Sie können diese Funktion in Ihre .NET Webanwendungen für die dynamische Generierung und Integration von HTML5 Canvas auf Webseiten einbetten.

HTML5 Canvas-Element wird verwendet, um Grafiken spontan innerhalb der Webseiten zu zeichnen. Es stellt Ihnen einen Bereich zur Verfügung, der als Container für Grafiken oder Zeichenobjekte fungiert. Sie können Pfade, Kästchen, Texte, Bilder und andere Objekte zeichnen und diese dann in Bildformate rendern. Mit Aspose.Imaging for .NET können Sie ein HTML5-Canvas-Element mit C# oder VB.NET generieren. Mit dieser Funktion können Sie den HTML5-Canvas dynamisch erstellen und seine Quellgrafikdatei in Ihren Webanwendungen wie ASP.NET Anwendung festlegen. Fahren wir also fort, um zu prüfen, wie das HTML5-Canvas-Element mithilfe von C# mit Aspose.Imaging for .NET API erstellt wird.

C# API zum Generieren von HTML5 Canvas – Installation

Lassen Sie uns zunächst einen Blick darauf werfen, wie Aspose.Imaging for .NET in Ihrer .NET Anwendung installiert wird. Es ist so einfach wie Kuchen. Sie können entweder einen Verweis auf die DLL der API hinzufügen oder sie mit NuGet Package Manager installieren.

PM> Install-Package Aspose.Imaging

Erstellen Sie eine Webseite mit HTML5 Canvas mit C#

Mit HTML5 Canvas können Sie ein Quellbild festlegen, das im Canvas Bereich angezeigt wird. Mit Aspose.Imaging for .NET können Sie CDR, CMX, EMF, WMF und SVG-Grafiken in einen HTML5-Canvas exportieren, ohne sich Gedanken über den HTML, JavaScript und CSS-Code machen zu müssen. Im Folgenden sind die Schritte zum Erstellen einer HTML-Seite mit einem HTML5-Canvas-Element darauf aufgeführt.

  • Laden Sie eine Grafikdatei, die Sie als Quelle der Leinwand festlegen möchten, mit der methode Image.Load().
  • Erstellen Sie HTML5 Canvas, indem Sie das Bild mit der methode Image.Save() exportieren.

Das folgende Codebeispiel zeigt, wie Sie HTML5 Canvas mit Grafiken mithilfe von C# erstellen.

using (var image = Image.Load(@"Sample.svg"))
{
    image.Save(@"Canvas.html", new Html5CanvasOptions
    {
        VectorRasterizationOptions = new SvgRasterizationOptions()
    });
}  

Nur HTML5-Canvas-Element mit C# generieren

Im vorherigen Beispiel haben wir eine vollständige HTML-Seite generiert, die das HTML5-Canvas-Element enthält. In bestimmten Fällen müssen Sie das Canvas-Element jedoch möglicherweise nur generieren, um es in Ihre Webseite einzubetten. Für solche Fälle können Sie die Aspose.Imaging-API konfigurieren, um zu vermeiden, dass die vollständige HTML-Seite generiert wird. Im Folgenden sind die Schritte zum Generieren des HTML5-Canvas-Elements aufgeführt.

Das folgende Codebeispiel zeigt, wie Sie das HTML5-Canvas-Element nur mit C# erstellen.

using (var image = Image.Load(@"Sample.svg"))
{
    image.Save(@"Canvas.html", new Html5CanvasOptions
    {
        VectorRasterizationOptions = new SvgRasterizationOptions(),
        FullHtmlPage = false
    });
}

Fazit

Dieser Artikel behandelte das dynamische Generieren von HTML5 Canvas mithilfe von C# in .NET Anwendungen. Wir haben gesehen, wie man die vollständige HTML-Seite mit einem HTML5-Canvas oder einem HTML5-Canvas nur mit Aspose.Imaging for .NET erstellt. Weitere Informationen zur API finden Sie in der Dokumentation.

Siehe auch