สร้าง HTML5 Canvas โดยใช้ C#

ในบทความนี้ ฉันจะแสดงวิธีสร้างองค์ประกอบ HTML5 Canvas ด้วยกราฟิกโดยใช้ C# คุณสามารถฝังคุณลักษณะนี้ภายในแอปพลิเคชันเว็บ .NET ของคุณสำหรับการสร้างแบบไดนามิกและการรวม HTML5 Canvas บนหน้าเว็บ

องค์ประกอบ HTML5 Canvas ใช้เพื่อวาดกราฟิกได้ทันทีภายในหน้าเว็บ มีพื้นที่ที่ทำหน้าที่เป็นที่เก็บกราฟิกหรือวัตถุวาดภาพ คุณสามารถวาดเส้นทาง กล่อง ข้อความ รูปภาพ และวัตถุอื่นๆ แล้วแสดงเป็นรูปแบบรูปภาพได้ Aspose.Imaging for .NET ให้คุณสร้างองค์ประกอบ HTML5 Canvas โดยใช้ C# หรือ VB.NET คุณสมบัตินี้ช่วยให้คุณสร้าง HTML5 Canvas แบบไดนามิกและตั้งค่าไฟล์กราฟิกต้นฉบับภายในเว็บแอปพลิเคชันของคุณ เช่น แอปพลิเคชัน ASP.NET ลองดำเนินการต่อไปเพื่อตรวจสอบวิธีสร้างองค์ประกอบ HTML5 Canvas โดยใช้ C# กับ Aspose.Imaging for .NET API

C # API เพื่อสร้าง HTML5 Canvas - การติดตั้ง

ก่อนอื่น เรามาดูวิธีการติดตั้ง Aspose.Imaging for .NET ภายในแอปพลิเคชัน .NET ของคุณ มันง่ายเหมือนพาย คุณอาจเพิ่มการอ้างอิงถึง DLL ของ API หรือติดตั้งโดยใช้ NuGet Package Manager

PM> Install-Package Aspose.Imaging

สร้างเว็บเพจด้วย HTML5 Canvas โดยใช้ C#

HTML5 Canvas ช่วยให้คุณตั้งค่ารูปภาพต้นฉบับที่จะปรากฏภายในพื้นที่ผ้าใบ เมื่อใช้ Aspose.Imaging for .NET คุณสามารถส่งออกกราฟิก CDR, CMX, EMF, WMF และ SVG ไปยัง HTML5 Canvas โดยไม่ต้องกังวลเกี่ยวกับโค้ด HTML, JavaScript และ CSS ต่อไปนี้เป็นขั้นตอนในการสร้างหน้า HTML ที่มีองค์ประกอบ HTML5 Canvas

  • โหลดไฟล์กราฟิกที่คุณต้องการตั้งเป็นแหล่งที่มาของผืนผ้าใบโดยใช้เมธอด Image.Load()
  • สร้าง HTML5 Canvas โดยส่งออกรูปภาพโดยใช้เมธอด Image.Save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีสร้าง HTML5 Canvas ด้วยกราฟิกโดยใช้ C#

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

สร้าง HTML5 Canvas Element โดยใช้ C# เท่านั้น

ในตัวอย่างก่อนหน้านี้ เราได้สร้างหน้า HTML ที่สมบูรณ์ซึ่งมีองค์ประกอบ HTML5 Canvas อย่างไรก็ตาม ในบางกรณี คุณอาจต้องสร้างองค์ประกอบผ้าใบเพื่อฝังไว้ในหน้าเว็บของคุณเท่านั้น ในกรณีดังกล่าว คุณสามารถกำหนดค่า Aspose.Imaging API เพื่อหลีกเลี่ยงการสร้างหน้า HTML ที่สมบูรณ์ ต่อไปนี้เป็นขั้นตอนในการสร้างองค์ประกอบ HTML5 Canvas

  • โหลดไฟล์กราฟิกเพื่อตั้งเป็นแหล่งที่มาของผืนผ้าใบโดยใช้เมธอด Image.Load()
  • ตั้งค่าคุณสมบัติ Html5CanvasOptions.FullHtmlPage เป็นเท็จ
  • ส่งออกรูปภาพเป็น HTML โดยใช้วิธี Image.Save()

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีสร้างองค์ประกอบ HTML5 Canvas โดยใช้ C# เท่านั้น

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

บทสรุป

บทความนี้กล่าวถึงวิธีสร้าง HTML5 Canvas แบบไดนามิกโดยใช้ C# ภายในแอปพลิเคชัน .NET เราได้เห็นวิธีสร้างหน้า HTML ที่สมบูรณ์ซึ่งมี HTML5 Canvas หรือ HTML5 Canvas โดยใช้ Aspose.Imaging for .NET เท่านั้น คุณสามารถสำรวจเพิ่มเติมเกี่ยวกับ API ได้โดยใช้ เอกสารประกอบ

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