Skapa HTML5 Canvas med C#

I den här artikeln kommer jag att visa dig hur du genererar HTML5 Canvas-elementet med grafik med C#. Du kan bädda in den här funktionen i dina .NET-webbapplikationer för dynamisk generering och integration av HTML5 Canvas på webbsidor.

Elementet HTML5 Canvas används för att rita grafik i farten på webbsidorna. Det ger dig ett område som fungerar som en behållare med grafik eller ritobjekt. Du kan rita banor, rutor, texter, bilder och andra objekt och sedan rendera dem till bildformat. Aspose.Imaging for .NET låter dig skapa ett HTML5 Canvas-element med C# eller VB.NET. Den här funktionen låter dig skapa HTML5 Canvas dynamiskt och ställa in dess källgrafikfil i dina webbapplikationer som ASP.NET-applikationen. Så låt oss gå vidare för att kontrollera hur man skapar HTML5 Canvas-elementet med C# med Aspose.Imaging för .NET API.

C# API för att generera HTML5 Canvas - Installation

Först av allt, låt oss ta en titt på hur man installerar Aspose.Imaging för .NET i din .NET-applikation. Det är så enkelt som en plätt. Du kan antingen lägga till en referens till API:s DLL eller installera den med NuGet Package Manager.

PM> Install-Package Aspose.Imaging

Skapa en webbsida med HTML5 Canvas med C#

HTML5 Canvas låter dig ställa in en källbild som ska visas inom arbetsytan. Med Aspose.Imaging för .NET kan du exportera CDR-, CMX-, EMF-, WMF- och SVG-grafik till en HTML5 Canvas utan att behöva oroa dig för HTML-, JavaScript- och CSS-koden. Följande är stegen för att skapa en HTML-sida med ett HTML5 Canvas-element.

  • Ladda en grafikfil som du vill ställa in som källa för arbetsytan med metoden Image.Load().
  • Skapa HTML5 Canvas genom att exportera bilden med metoden Image.Save().

Följande kodexempel visar hur man skapar HTML5 Canvas med grafik med C#.

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

Generera HTML5 Canvas Element endast med C#

I det föregående exemplet har vi skapat en komplett HTML-sida som innehåller HTML5 Canvas-elementet. Men i vissa fall kan du behöva generera canvas-elementet bara för att bädda in det på din webbsida. I sådana fall kan du konfigurera Aspose.Imaging API för att undvika att generera hela HTML-sidan. Följande är stegen för att generera HTML5 Canvas-elementet.

Följande kodexempel visar hur du skapar HTML5 Canvas-elementet endast med C#.

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

Slutsats

Den här artikeln behandlade hur man genererar HTML5 Canvas dynamiskt med C# i .NET-applikationer. Vi har sett hur man skapar hela HTML-sidan som innehåller en HTML5 Canvas eller HTML5 Canvas endast med Aspose.Imaging för .NET. Du kan utforska mer om API:t med hjälp av dokumentationen.

Se även