System.Drawing in Blazor WebAssembply App C#

Blazor framework is widely used to build interactive and reusable web UI in web technologies. Moreover, Blazor WebAssembly apps execute directly in the browser on a WebAssembly-based .NET runtime. This article covers how to use System.Drawing library in a Blazor WebAssembly app. The API can be used to draw text strings, images, vector graphics, etc. Let us go through this article under the following headings to learn more details:

Create a C# Blazor WebAssembly App Project

In Microsoft Visual Studio IDE, create a Blazor WebAssembly app. Press the ‘Next’ button and then mark .NET 5.0 and ASP.NET Core checkboxes as per the following screenshots.

Blazor WebAssembly App
System.Drawing Blazor

Update the Project References

Browse the NuGet gallery and configure Aspose.Drawing package to be added as the project dependency.

Add the Code to Draw an Image

Replace the Pages/Index.razor file contents with the following code snippet to create an image containing the drawing.

Add the License and Initialization Code

Now you can add the license file as an embedded resource and add the following license initialization code to the main method in the Program.cs file. However, in case you do not have a license, you may request a free temporary license.

Run the Application

Run the application from the Microsoft Visual Studio IDE and the browser will show the gradient image as under:


In this article, you have learned how to use System.Drawing functionality in Blazor WebAssembly application. You may visit the documentation space for more details about the features offered by the API. Moreover, please reach out to us via the forum in case you need to discuss any of your requirements or concerns.

See Also

Using System.Drawing with .NET 6 on a non-Windows Platform