System.Drawing ใน Blazor WebAssembply App C#

กรอบ Blazor ใช้กันอย่างแพร่หลายในการสร้าง UI เว็บแบบโต้ตอบและใช้ซ้ำได้ในเทคโนโลยีเว็บ ยิ่งไปกว่านั้น แอพ Blazor WebAssembly รันโดยตรงในเบราว์เซอร์บนรันไทม์ .NET ที่ใช้ WebAssembly บทความนี้กล่าวถึงวิธีใช้ไลบรารี System.Drawing ในแอป Blazor WebAssembly สามารถใช้ API เพื่อวาดสตริงข้อความ รูปภาพ กราฟิกแบบเวกเตอร์ ฯลฯ ให้เราอ่านบทความนี้ภายใต้หัวข้อต่อไปนี้เพื่อเรียนรู้รายละเอียดเพิ่มเติม:

สร้างโครงการแอป C# Blazor WebAssembly

ใน Microsoft Visual Studio IDE ให้สร้างแอป Blazor WebAssembly กดปุ่ม ‘ถัดไป’ จากนั้นทำเครื่องหมายในช่องทำเครื่องหมาย .NET 5.0 และ ASP.NET Core ตามภาพหน้าจอต่อไปนี้

แอพ Blazor WebAssembly
System.การวาดเบลเซอร์

อัปเดตการอ้างอิงโครงการ

เรียกดูแกลเลอรี NuGet และกำหนดค่าแพ็คเกจ Aspose.Drawing ที่จะเพิ่มเป็นการพึ่งพาโครงการ

เพิ่มรหัสเพื่อวาดภาพ

แทนที่เนื้อหาไฟล์ Pages/Index.razor ด้วยข้อมูลโค้ดต่อไปนี้เพื่อสร้างภาพที่มีภาพวาด

@page "/"
@using System.Drawing;
@using System.Drawing.Drawing2D;
@using System.Drawing.Imaging;
@using System.IO;

<img src="@imageSrc" />

@code {
    private string imageSrc;

    public Index()
    {
        imageSrc = "data:image/png;base64, " + Convert.ToBase64String(Draw(ImageFormat.Png).ToArray());
    }

    static MemoryStream Draw(ImageFormat format)
    {
        Bitmap bitmap = new Bitmap(1000, 800, PixelFormat.Format32bppPArgb);
        Graphics graphics = Graphics.FromImage(bitmap);
        graphics.SmoothingMode = SmoothingMode.AntiAlias;

        Brush brush = new LinearGradientBrush(new Point(0, 0), new Point(1000, 800), Color.Red, Color.Blue);
        graphics.FillEllipse(brush, 100, 100, 800, 600);

        MemoryStream result = new MemoryStream();
        bitmap.Save(result, format);
        result.Seek(0, SeekOrigin.Begin);
        return result;
    }
}

เพิ่มใบอนุญาตและรหัสเริ่มต้น

ตอนนี้คุณสามารถเพิ่มไฟล์ใบอนุญาตเป็นทรัพยากรแบบฝังและเพิ่มรหัสเริ่มต้นใบอนุญาตต่อไปนี้ไปยังวิธีการหลักในไฟล์ Program.cs อย่างไรก็ตาม ในกรณีที่คุณไม่มีใบอนุญาต คุณสามารถขอใบอนุญาตชั่วคราวได้ฟรี

Aspose.Drawing.License license = new Aspose.Drawing.License();
license.SetLicense("BlazorApp1.Client.Aspose.Drawing.NET.lic");

เรียกใช้แอปพลิเคชัน

เรียกใช้แอปพลิเคชันจาก Microsoft Visual Studio IDE และเบราว์เซอร์จะแสดงภาพการไล่ระดับสีดังต่อไปนี้:

บทสรุป

ในบทความนี้ คุณได้เรียนรู้วิธีใช้ฟังก์ชัน System.Drawing ในแอปพลิเคชัน Blazor WebAssembly คุณสามารถเยี่ยมชมพื้นที่ เอกสาร เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับคุณสมบัติที่นำเสนอโดย API นอกจากนี้ โปรดติดต่อเราผ่านทาง ฟอรัม ในกรณีที่คุณต้องการหารือเกี่ยวกับข้อกำหนดหรือข้อกังวลใดๆ ของคุณ

ดูสิ่งนี้ด้วย

ใช้ System.Drawing กับ .NET 6 บนแพลตฟอร์มที่ไม่ใช่ Windows