Vytvořte HTML5 Canvas pomocí C#

V tomto článku vám ukážu, jak vygenerovat prvek HTML5 Canvas s grafikou pomocí C#. Tuto funkci můžete vložit do svých webových aplikací .NET pro dynamické generování a integraci HTML5 Canvas na webové stránky.

Element HTML5 Canvas se používá k průběžnému kreslení grafiky na webových stránkách. Poskytuje vám oblast, která funguje jako kontejner grafiky nebo objektů kreslení. Můžete kreslit cesty, rámečky, texty, obrázky a další objekty a poté je vykreslit do obrazových formátů. Aspose.Imaging for .NET umožňuje generovat element HTML5 Canvas pomocí C# nebo VB.NET. Tato funkce vám umožňuje vytvářet HTML5 Canvas dynamicky a nastavit jeho zdrojový grafický soubor ve vašich webových aplikacích, jako je aplikace ASP.NET. Pojďme tedy dále zkontrolovat, jak vytvořit prvek HTML5 Canvas pomocí C# s Aspose.Imaging for .NET API.

C# API pro generování HTML5 Canvas – instalace

Nejprve se podívejme na to, jak nainstalovat Aspose.Imaging for .NET do vaší .NET aplikace. Je to jednoduché jako koláč. Můžete buď přidat odkaz na DLL API nebo jej nainstalovat pomocí NuGet Package Manager.

PM> Install-Package Aspose.Imaging

Vytvořte webovou stránku s HTML5 Canvas pomocí C#

HTML5 Canvas umožňuje nastavit zdrojový obrázek, který se objeví v oblasti plátna. Pomocí Aspose.Imaging for .NET můžete exportovat grafiku CDR, CMX, EMF, WMF a SVG do HTML5 Canvas, aniž byste se museli starat o kód HTML, JavaScript a CSS. Níže jsou uvedeny kroky k vytvoření stránky HTML s prvkem HTML5 Canvas.

  • Načtěte grafický soubor, který chcete nastavit jako zdroj plátna, pomocí metody Image.Load().
  • Vytvořte HTML5 Canvas exportem obrázku pomocí metody Image.Save().

Následující ukázka kódu ukazuje, jak vytvořit HTML5 Canvas s grafikou pomocí C#.

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

Generovat HTML5 Canvas Element pouze pomocí C#

V předchozím příkladu jsme vygenerovali kompletní HTML stránku, která obsahuje element HTML5 Canvas. V některých případech však může být nutné vygenerovat prvek canvas pouze k jeho vložení do vaší webové stránky. Pro takové případy můžete nakonfigurovat Aspose.Imaging API, abyste se vyhnuli generování kompletní HTML stránky. Následují kroky pro vygenerování prvku HTML5 Canvas.

Následující ukázka kódu ukazuje, jak vytvořit prvek HTML5 Canvas pouze pomocí C#.

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

Závěr

Tento článek se zabýval tím, jak dynamicky generovat HTML5 Canvas pomocí C# v aplikacích .NET. Viděli jsme, jak vytvořit kompletní HTML stránku obsahující HTML5 Canvas nebo HTML5 Canvas pouze pomocí Aspose.Imaging for .NET. Více o API můžete prozkoumat pomocí dokumentace.

Viz také