如何製作具有圖像調整大小功能的 ASP.NET HTML 程式碼編寫器-js教程-PHP中文網

身為開發人員，影像解析度有時會被我們忽略。畢竟，基本功能、錯誤處理和直覺性是第一位的。然而，這並不意味著處理影像解析度或大小不重要。

事實上，不正確的影像處理可能會減慢網站和應用程式的速度、消耗過多的頻寬或破壞 UI 或 UX。防止這種情況的一個好方法是在儲存上傳的圖像之前調整其大小。那麼，讓我們了解如何使用 ASP.NET、ImageMagick 和 WYSIWYG HTML 編輯器來建立具有圖片大小調整功能的 HTML 程式碼編寫器。

要點

調整影像大小可透過減少載入時間和頻寬使用來提高效能。
ASP.NET、Froala 和 ImageMagick 結合起來建立一個具有圖像大小調整功能的 Web 應用程式。
Froala Editor 允許輕鬆上傳圖像和富文本編輯。
ImageMagick 簡化了大小調整，確保影像適合設定尺寸。
可自訂的解決方案，包含驗證、增強等選項。

這是我們的 HTML 程式碼編寫器的圖片調整大小功能的一個小示範：

How to make an ASP.NET HTML code writer with image resize capabilities

請注意 2 個範例影像在上傳之前如何具有橫向方向以及它們在上傳之後如何變化。現在，閱讀更多內容以使用具有圖像調整大小功能的基於 ASP.NET 的 HTML 程式碼編寫器。有關更多詳細信息，請隨時查看我們的 .NET 圖像調整大小文件。現在讓我們設定應用程式。

設定應用程式

在進入開發部分之前，讓我們先看看我們將使用的工具：

ASP.NET Core：Visual Studio 附帶的開源 Web 應用程式框架
ImageMagick：用於增強影像的廣泛開源軟體套件
Froala：強大的所見即所得 HTML 編輯器，支援 HTML 程式碼編輯、圖片上傳、Markdown 等

現在我們知道了我們需要什麼，讓我們執行以下步驟來建立我們的專案：

開啟 Visual Studio 並建立一個新專案。
選擇「ASP.NET Core Web 應用程式（Razor 頁面）範本。在我們的例子中，項目名稱是 FroalaImageResizeDemo.
選擇「.NET 8.0（長期支援）」作為框架。
點選「建立」。

接下來，讓我們透過 CDN 加入 Froala 編輯器：

開啟Pages >下的「_Layout.cshtml」檔案共用目錄。
在部分加入 Froala CDN 連結。

<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.

登入後複製

在解決方案資源管理器中，右鍵點選專案名稱並選擇「管理 NuGet 套件。」
在「瀏覽」標籤下，搜尋「Magick.NET-Q8-AnyCPU」並點選安裝按鈕。

最後，讓我們建立一個可以儲存影像的資料夾。在解決方案資源管理器中，找到“wwwroot”資料夾。在其中建立一個名為「images」的新資料夾。現在我們已經配置了專案設置，是時候創建我們的圖像調整大小 HTML 程式碼編寫器了。

製作 HTML 程式碼編寫器

首先，讓我們建立一個新頁面，我們可以在其中初始化和載入 Froala Editor。

右鍵 Pages 資料夾。
選擇新增> 新商品 > 剃刀頁。
我們將其命名為「Editor.cshtml。」

將以下程式碼插入新建立的頁面中：

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

<h2 class="mt-5 mb-3">@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>

登入後複製

此頁將包含 Froala 編輯器以及標題。 ID 為「editor」的

是我們將載入 Froala 的容器。另一方面，imageUploadURL 是 Froala 映像上傳選項，用於確定在何處發出上傳請求。現在，我們將該選項留空，但稍後我們會再討論它。
我們現在有一個專門用於 HTML 程式碼編寫器的頁面。然而，它仍然無法通過導航到達，所以讓我們透過添加連結來解決這個問題：

再開啟「_Layout.cshtml」。

將以下程式碼片段加入導覽列部分的
中：

<li class="nav-item"> <a class="nav-link text-dark" asp-page="/Editor">Froala Editor</a> </li>
登入後複製

然後，嘗試按 F5 或播放按鈕來執行應用程式。現在您應該可以看到預設的 ASP.NET Core 應用程序，其導航列上有一個“Froala Editor”連結。單擊它，您將看到 Froala 正在運行。現在您可以編輯文字、上傳圖像以及執行其他富文本操作。現在剩下的就是將我們的 HTML 程式碼編寫器與 ImageMagick 結合起來以調整圖像大小。

整合 ImageMagick 來調整影像大小

要包含 ImageMagick 的調整大小功能，我們需要先建立一個新控制器：

右鍵點擊 Controllers 資料夾（如果不是由 IDE 生成，則建立一個）。

選擇新增> 新商品。

在 ASP.NET Core 類別下，選擇「API 控制器 - 空」。

將其命名為「FroalaApiController.cs」並點擊新增按鈕。

接下來，將以下程式碼加入新建立的控制器中：

<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.
登入後複製
登入後複製

首先，請確保包含“using ImageMagick”以啟用它。然後我們檢查文件是否已成功從請求上傳。然後，我們定義儲存映像的檔案路徑（在我們的例子中，位於 wwwroot > 圖片）。然後，我們透過聲明具有所需尺寸（600×600 像素）的新 MagickImage 物件來調整影像大小。最後，成功時我們會回傳 HTTP 200 狀態碼以及包含圖像 URL 的 JSON。然後 Froala 將在編輯器中顯示圖像，我們就完成了！

結論

調整圖像大小對於任何應用程式來說都是一項至關重要的任務。例如，我們可能需要限制圖像解析度以用於顯示目的（例如電子郵件或部落格圖像）。我們可能還需要最小化圖像大小以提高效率並降低成本。然而，影像處理有時會很痛苦。幸運的是，有許多工具（例如 ImageMagick）可以幫助我們輕鬆實現這一目標，正如我在 HTML 程式碼編寫器演示中向您展示的那樣。

透過結合 .NET、Froala 和 ImageMagick，您可以簡化在應用程式中實現影像大小調整的整個過程。對於您自己的項目，使用相同的工具，您甚至可以將其提升一個檔次。例如，您可以新增影像品質增強、檔案類型和大小驗證、自動儲存等，以使您的應用程式更加健壯。現在，輪到你為你的專案施展一些（圖）魔法（K）了！