Créer un canevas HTML5 à l'aide de C#

Dans cet article, je vais vous montrer comment générer l’élément HTML5 Canvas avec des graphiques à l’aide de C#. Vous pouvez intégrer cette fonctionnalité dans vos applications Web .NET pour la génération dynamique et l’intégration de HTML5 Canvas sur des pages Web.

L’élément HTML5 Canvas est utilisé pour dessiner des graphiques à la volée dans les pages Web. Il vous fournit une zone qui agit comme un conteneur d’objets graphiques ou de dessin. Vous pouvez dessiner des chemins, des boîtes, des textes, des images et d’autres objets, puis les rendre dans des formats d’image. Aspose.Imaging for .NET vous permet de générer un élément HTML5 Canvas en utilisant C# ou VB.NET. Cette fonctionnalité vous permet de créer dynamiquement le canevas HTML5 et de définir son fichier graphique source dans vos applications Web telles que l’application ASP.NET. Allons donc plus loin pour vérifier comment créer l’élément HTML5 Canvas en utilisant C# avec Aspose.Imaging for .NET.

API C# pour générer HTML5 Canvas - Installation

Tout d’abord, voyons comment installer Aspose.Imaging for .NET dans votre application .NET. C’est simple comme bonjour. Vous pouvez soit ajouter une référence à la DLL de l’API, soit l’installer à l’aide de NuGet Package Manager.

PM> Install-Package Aspose.Imaging

Créer une page Web avec HTML5 Canvas en utilisant C#

HTML5 Canvas vous permet de définir une image source qui apparaîtra dans la zone de canevas. En utilisant Aspose.Imaging for .NET, vous pouvez exporter des graphiques CDR, CMX, EMF, WMF et SVG vers un canevas HTML5 sans vous soucier du code HTML, JavaScript et CSS. Voici les étapes pour créer une page HTML contenant un élément HTML5 Canvas.

  • Chargez un fichier graphique que vous souhaitez définir comme source du canevas à l’aide de la méthode Image.Load().
  • Créez HTML5 Canvas en exportant l’image à l’aide de la méthode Image.Save().

L’exemple de code suivant montre comment créer HTML5 Canvas avec des graphiques à l’aide de C#.

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

Générer un élément HTML5 Canvas uniquement à l’aide de C#

Dans l’exemple précédent, nous avons généré une page HTML complète contenant l’élément HTML5 Canvas. Cependant, dans certains cas, vous devrez peut-être générer l’élément canvas uniquement pour l’intégrer dans votre page Web. Dans de tels cas, vous pouvez configurer l’API Aspose.Imaging pour éviter de générer la page HTML complète. Voici les étapes pour générer l’élément HTML5 Canvas.

L’exemple de code suivant montre comment créer l’élément HTML5 Canvas uniquement à l’aide de C#.

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

Conclusion

Cet article explique comment générer dynamiquement HTML5 Canvas à l’aide de C# dans les applications .NET. Nous avons vu comment créer la page HTML complète contenant un canevas HTML5 ou un canevas HTML5 uniquement en utilisant Aspose.Imaging for .NET. Vous pouvez en savoir plus sur l’API à l’aide de la documentation.

Voir également