Utwórz płótno HTML5 za pomocą C#

W tym artykule pokażę, jak wygenerować element HTML5 Canvas z grafiką przy użyciu języka C#. Możesz osadzić tę funkcję w swoich aplikacjach internetowych .NET w celu dynamicznego generowania i integracji HTML5 Canvas na stronach internetowych.

Element HTML5 Canvas służy do rysowania grafiki w locie na stronach internetowych. Zapewnia obszar, który działa jak pojemnik na grafikę lub obiekty rysunkowe. Możesz rysować ścieżki, ramki, teksty, obrazy i inne obiekty, a następnie renderować je do formatów obrazów. Aspose.Imaging for .NET umożliwia wygenerowanie elementu HTML5 Canvas przy użyciu języka C# lub VB.NET. Ta funkcja umożliwia dynamiczne tworzenie płótna HTML5 i ustawianie źródłowego pliku graficznego w aplikacjach internetowych, takich jak aplikacja ASP.NET. Przejdźmy więc dalej, aby sprawdzić, jak utworzyć element HTML5 Canvas przy użyciu C# z Aspose.Imaging for .NET API.

Interfejs API języka C# do generowania płótna HTML5 — instalacja

Przede wszystkim przyjrzyjmy się, jak zainstalować Aspose.Imaging for .NET w aplikacji .NET. To proste jak bułka z masłem. Możesz dodać odwołanie do API DLL lub zainstalować je za pomocą NuGet Package Manager.

PM> Install-Package Aspose.Imaging

Utwórz stronę internetową z HTML5 Canvas przy użyciu C#

HTML5 Canvas pozwala ustawić obraz źródłowy, który pojawi się w obszarze płótna. Korzystając z Aspose.Imaging for .NET, możesz eksportować grafikę CDR, CMX, EMF, WMF i SVG do płótna HTML5 bez martwienia się o kod HTML, JavaScript i CSS. Poniżej przedstawiono kroki tworzenia strony HTML zawierającej element HTML5 Canvas.

  • Załaduj plik graficzny, który chcesz ustawić jako źródło płótna, używając metody Image.Load().
  • Utwórz płótno HTML5, eksportując obraz za pomocą metody Image.Save().

Poniższy przykładowy kod pokazuje, jak utworzyć kanwę HTML5 z grafiką przy użyciu języka C#.

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

Wygeneruj element płótna HTML5 tylko przy użyciu języka C#

W poprzednim przykładzie wygenerowaliśmy kompletną stronę HTML zawierającą element HTML5 Canvas. Jednak w niektórych przypadkach może być konieczne wygenerowanie elementu canvas tylko w celu osadzenia go na stronie internetowej. W takich przypadkach można skonfigurować interfejs API Aspose.Imaging, aby uniknąć generowania całej strony HTML. Poniżej przedstawiono kroki, które należy wykonać, aby wygenerować element HTML5 Canvas.

Poniższy przykładowy kod pokazuje, jak utworzyć element HTML5 Canvas tylko przy użyciu języka C#.

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

Wniosek

W tym artykule omówiono sposób dynamicznego generowania kanwy HTML5 przy użyciu języka C# w aplikacjach platformy .NET. Widzieliśmy, jak stworzyć kompletną stronę HTML zawierającą HTML5 Canvas lub tylko HTML5 Canvas przy użyciu Aspose.Imaging for .NET. Możesz dowiedzieć się więcej o interfejsie API, korzystając z dokumentacji.

Zobacz też