กรอบ Blazor ใช้กันอย่างแพร่หลายในการสร้าง UI เว็บแบบโต้ตอบและใช้ซ้ำได้ในเทคโนโลยีเว็บ ยิ่งไปกว่านั้น แอพ Blazor WebAssembly รันโดยตรงในเบราว์เซอร์บนรันไทม์ .NET ที่ใช้ WebAssembly บทความนี้กล่าวถึงวิธีใช้ไลบรารี System.Drawing ในแอป Blazor WebAssembly สามารถใช้ API เพื่อวาดสตริงข้อความ รูปภาพ กราฟิกแบบเวกเตอร์ ฯลฯ ให้เราอ่านบทความนี้ภายใต้หัวข้อต่อไปนี้เพื่อเรียนรู้รายละเอียดเพิ่มเติม:
- สร้างโครงการแอป C# Blazor WebAssembly
- อัปเดตการอ้างอิงโครงการ
- เพิ่มรหัสเพื่อวาดภาพ
- เพิ่มใบอนุญาตและรหัสเริ่มต้น
- เรียกใช้แอปพลิเคชัน
สร้างโครงการแอป C# Blazor WebAssembly
ใน Microsoft Visual Studio IDE ให้สร้างแอป Blazor WebAssembly กดปุ่ม ‘ถัดไป’ จากนั้นทำเครื่องหมายในช่องทำเครื่องหมาย .NET 5.0 และ ASP.NET Core ตามภาพหน้าจอต่อไปนี้
อัปเดตการอ้างอิงโครงการ
เรียกดูแกลเลอรี 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 นอกจากนี้ โปรดติดต่อเราผ่านทาง ฟอรัม ในกรณีที่คุณต้องการหารือเกี่ยวกับข้อกำหนดหรือข้อกังวลใดๆ ของคุณ