Bagaimana untuk membuat penulis kod HTML ASP.NET dengan keupayaan mengubah saiz imej

Leraian imej ialah sesuatu yang kadangkala kita terlepas pandang sebagai pembangun. Kefungsian asas, pengendalian ralat dan intuitif diutamakan. Walau bagaimanapun, itu tidak bermakna pengendalian resolusi atau saiz imej tidak penting.

Malah, pengendalian imej yang tidak betul boleh melambatkan tapak web dan aplikasi, menggunakan lebar jalur yang berlebihan atau merosakkan UI atau UX. Satu cara yang baik untuk mengelakkan perkara ini adalah dengan mengubah saiz imej yang dimuat naik sebelum ia disimpan. Jadi, mari temui cara kita boleh membina penulis kod HTML dengan saiz semula imej menggunakan ASP.NET, ImageMagick dan editor HTML WYSIWYG.

Ambil Utama

• Saiz semula imej meningkatkan prestasi dengan mengurangkan masa muat dan penggunaan lebar jalur.

• ASP.NET, Froala dan ImageMagick digabungkan untuk membina apl web dengan saiz semula imej.

• Froala Editor membenarkan muat naik imej yang mudah dan penyuntingan teks kaya.

• ImageMagick memudahkan saiz semula, memastikan imej sesuai dengan dimensi set.

• Penyelesaian boleh disesuaikan dengan pilihan untuk pengesahan, peningkatan dan banyak lagi.

Berikut ialah sedikit demonstrasi keupayaan mengubah saiz imej penulis kod HTML kami:

Perhatikan cara 2 imej sampel mempunyai orientasi landskap sebelum dimuat naik dan cara kedua-duanya berubah selepas itu. Sekarang, baca lebih lanjut untuk menggunakan penulis kod HTML berasaskan ASP.NET dengan keupayaan mengubah saiz imej. Untuk butiran lanjut, sila semak dokumentasi saiz semula imej .NET kami. Sekarang mari sediakan aplikasi.

Menyediakan aplikasi

Sebelum kita sampai ke bahagian pembangunan, mari lihat alatan yang akan kita gunakan:

• ASP.NET Core: Rangka kerja aplikasi web sumber terbuka yang disertakan dengan Visual Studio

• ImageMagick: Suite perisian sumber terbuka yang luas untuk mempertingkatkan imej

• Froala: Editor HTML WYSIWYG yang berkuasa yang menyokong penyuntingan kod HTML, muat naik imej, Markdown dan banyak lagi

Sekarang kita tahu apa yang kita perlukan, mari lakukan langkah berikut untuk mencipta projek kita:

1. Buka Visual Studio dan buat projek baharu.

2. Pilih templat “ASP.NET Core Web App (Razor Pages). Dalam kes kami, nama projek ialah FroalaImageResizeDemo.

3. Pilih “.NET 8.0 (Sokongan Jangka Panjang)” sebagai rangka kerja.

4. Klik “Buat”.

Seterusnya, mari tambah Editor Froala melalui CDN:

1. Buka fail “_Layout.cshtml” di bawah Halaman > Direktori dikongsi.

2. Tambahkan pautan Froala CDN di dalam bahagian .
   

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/css/froala_editor.pkgd.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/js/froala_editor.pkgd.min.js"></script>Once we’ve included Froala in our project, we will be installing ImageMagick via NuGet Package Manager.

1. Dalam Penjelajah Penyelesaian, klik kanan nama projek dan pilih “Urus Pakej NuGet.”

2. Di bawah tab “Semak imbas”, cari “Magick.NET-Q8-AnyCPU” dan klik butang pasang.

Akhir sekali, mari buat folder tempat kita boleh menyimpan imej. Dalam Penjelajah Penyelesaian, cari folder "wwwroot". Buat folder baharu di dalamnya bernama "imej." Memandangkan kami telah mengkonfigurasi persediaan projek kami, tiba masanya untuk mencipta penulis kod HTML saiz semula imej kami.

Membuat penulis kod HTML

Mula-mula, mari buat halaman baharu di mana kita boleh memulakan dan memuatkan Editor Froala.

1. Klik kanan folder Halaman.

2. Pilih Tambah > Item Baharu > Halaman Pencukur.

3. Mari namakannya "Editor.cshtml."

Masukkan kod berikut pada halaman yang baru dibuat:

@page
@model FroalaImageResizeDemo.Pages.EditorModel
@{
    ViewData["Title"] = "Froala Image Resize Demo";
}

<h2 id="ViewData-Title">@ViewData["Title"]</h2>

<div id="editor">For this demo, we're resizing all uploaded images to 600 px by 300 px.</div>


<script>
    new FroalaEditor('#editor', {
        imageUploadURL: '',
        heightMin: 600
    });
</script>

Halaman ini akan mengandungi editor Froala serta pengepala.

dengan ID "editor" ialah bekas tempat kami akan memuatkan Froala. Sebaliknya, imageUploadURL ialah pilihan muat naik imej Froala yang menentukan tempat permintaan muat naik dibuat. Buat masa ini, biarkan pilihan itu kosong, tetapi kita akan kembali kepadanya kemudian.

Kami kini mempunyai halaman khusus untuk penulis kod HTML kami. Walau bagaimanapun, ia masih tidak dapat dicapai melalui navigasi, jadi mari kita betulkan dengan menambahkan pautan:

1. Buka “_Layout.cshtml” sekali lagi.

2. Tambahkan coretan kod berikut pada

   dalam bahagian navbar:
   

Froala Editor

Selepas itu, cuba jalankan aplikasi dengan menekan F5 atau butang main. Anda kini sepatutnya melihat sekilas aplikasi Teras ASP.NET lalai dengan pautan "Froala Editor" pada bar navigasi. Klik padanya, dan anda akan melihat Froala beraksi. Anda kini boleh mengedit teks, memuat naik imej dan melakukan tindakan teks kaya yang lain. Apa yang tinggal sekarang ialah menggabungkan penulis kod HTML kami dengan ImageMagick untuk mengubah saiz imej.

Mengintegrasikan ImageMagick untuk mengubah saiz imej

Untuk memasukkan ciri ubah saiz ImageMagick, kita perlu mencipta pengawal baharu dahulu:

1. Klik kanan folder Pengawal (buat satu jika ia tidak dijana oleh IDE).

2. Pilih Tambah > Item Baharu.

3. Di bawah kategori ASP.NET Core, pilih “API Controller — Empty.”

4. Namakan "FroalaApiController.cs" dan klik butang tambah.

Seterusnya, tambahkan kod berikut pada pengawal yang baru dibuat:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/css/froala_editor.pkgd.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/4.3.0/js/froala_editor.pkgd.min.js"></script>Once we’ve included Froala in our project, we will be installing ImageMagick via NuGet Package Manager.

Pertama sekali, pastikan anda memasukkan "menggunakan ImageMagick" untuk mendayakannya. Kami kemudian menyemak sama ada fail telah berjaya dimuat naik daripada permintaan atau tidak. Kemudian, kami mentakrifkan laluan fail tempat kami menyimpan imej kami (dalam kes kami, di bawah wwwroot > imej). Selepas itu, kami mengubah saiz imej dengan mengisytiharkan objek MagickImage baharu dengan dimensi yang kami kehendaki (600×600 piksel). Akhir sekali, kami mengembalikan kod status HTTP 200 bersama-sama dengan JSON yang mengandungi URL imej mengenai kejayaan. Froala kemudiannya akan memaparkan imej dalam editor, dan kami sudah selesai!

Kesimpulan

Mengubah saiz imej ialah tugas penting untuk sebarang aplikasi. Sebagai contoh, kami mungkin perlu mengehadkan peleraian imej untuk tujuan paparan (cth., e-mel atau imej blog). Kami juga mungkin perlu meminimumkan saiz imej untuk kecekapan dan pengurangan kos. Walau bagaimanapun, pengendalian imej kadangkala menyusahkan. Nasib baik, terdapat berpuluh-puluh alat seperti ImageMagick yang boleh membantu kami mencapainya dengan mudah, seperti yang saya tunjukkan kepada anda dalam demo penulis kod HTML ini.

Dengan menggabungkan .NET, Froala dan ImageMagick, anda boleh menyelaraskan keseluruhan proses melaksanakan saiz semula imej dalam aplikasi anda. Untuk projek anda sendiri, dengan menggunakan alat yang sama, anda juga boleh mengambilnya dengan mudah. Sebagai contoh, anda boleh menambah peningkatan kualiti imej, jenis fail dan pengesahan saiz, autosimpan dan banyak lagi untuk menjadikan aplikasi anda lebih mantap. Kini, giliran anda untuk menaburkan beberapa (Imej)sihir(K) pada projek anda!

Atas ialah kandungan terperinci Bagaimana untuk membuat penulis kod HTML ASP.NET dengan keupayaan mengubah saiz imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!