Buat Kanvas HTML5 menggunakan C#

Pada artikel ini, saya akan menunjukkan cara membuat elemen Canvas HTML5 dengan grafis menggunakan C#. Anda dapat menyematkan fitur ini dalam aplikasi web .NET Anda untuk pembuatan dinamis dan integrasi Kanvas HTML5 di halaman web.

Elemen Kanvas HTML5 digunakan untuk menggambar grafik dengan cepat di dalam halaman web. Ini memberi Anda area yang berfungsi sebagai wadah grafik atau objek gambar. Anda dapat menggambar jalur, kotak, teks, gambar, dan objek lain lalu merendernya ke dalam format gambar. Aspose.Imaging for .NET memungkinkan Anda membuat elemen HTML5 Canvas menggunakan C# atau VB.NET. Fitur ini memungkinkan Anda membuat Kanvas HTML5 secara dinamis dan mengatur file grafik sumbernya di dalam aplikasi web Anda seperti aplikasi ASP.NET. Jadi mari kita lanjutkan lebih jauh untuk memeriksa cara membuat elemen Canvas HTML5 menggunakan C# dengan Aspose.Imaging for .NET API.

C# API untuk Menghasilkan Kanvas HTML5 - Instalasi

Pertama-tama, mari kita lihat cara menginstal Aspose.Imaging for .NET di dalam aplikasi .NET Anda. Ini sesederhana pie. Anda dapat menambahkan referensi ke DLL API atau menginstalnya menggunakan NuGet Package Manager.

PM> Install-Package Aspose.Imaging

Buat Halaman Web dengan HTML5 Canvas menggunakan C#

Kanvas HTML5 memungkinkan Anda menyetel gambar sumber yang akan muncul di dalam area kanvas. Menggunakan Aspose.Imaging for .NET, Anda dapat mengekspor grafik CDR, CMX, EMF, WMF, dan SVG ke Kanvas HTML5 tanpa mengkhawatirkan kode HTML, JavaScript, dan CSS. Berikut ini adalah langkah-langkah untuk membuat halaman HTML yang memiliki elemen Canvas HTML5 di dalamnya.

  • Muat file grafik yang ingin Anda atur sebagai sumber kanvas menggunakan metode Image.Load().
  • Buat HTML5 Canvas dengan mengekspor gambar menggunakan metode Image.Save().

Contoh kode berikut menunjukkan cara membuat HTML5 Canvas dengan grafik menggunakan C#.

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

Hasilkan Elemen Kanvas HTML5 Hanya menggunakan C

Pada contoh sebelumnya, kami telah membuat halaman HTML lengkap yang berisi elemen Kanvas HTML5. Namun, dalam kasus tertentu, Anda mungkin perlu membuat elemen kanvas hanya untuk menyematkannya di dalam halaman web Anda. Untuk kasus seperti itu, Anda dapat mengonfigurasi Aspose.Imaging API untuk menghindari pembuatan halaman HTML lengkap. Berikut adalah langkah-langkah untuk menghasilkan elemen Canvas HTML5.

Contoh kode berikut menunjukkan cara membuat elemen Kanvas HTML5 hanya menggunakan C#.

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

Kesimpulan

Artikel ini membahas cara membuat HTML5 Canvas secara dinamis menggunakan C# dalam aplikasi .NET. Kami telah melihat cara membuat halaman HTML lengkap yang berisi Kanvas HTML5 atau Kanvas HTML5 hanya menggunakan Aspose.Imaging for .NET. Anda dapat mempelajari lebih lanjut tentang API menggunakan dokumentasi.

Lihat juga