如何制作具有图像调整大小功能的 ASP.NET HTML 代码编写器

作为开发人员，图像分辨率有时会被我们忽视。毕竟，基本功能、错误处理和直观性是第一位的。然而，这并不意味着处理图像分辨率或大小不重要。

事实上，不正确的图像处理可能会减慢网站和应用程序的速度、消耗过多的带宽或破坏 UI 或 UX。防止这种情况的一个好方法是在存储上传的图像之前调整其大小。那么，让我们了解如何使用 ASP.NET、ImageMagick 和 WYSIWYG HTML 编辑器构建具有图像大小调整功能的 HTML 代码编写器。

要点

• 调整图像大小可通过减少加载时间和带宽使用来提高性能。

• ASP.NET、Froala 和 ImageMagick 结合起来构建一个具有图像大小调整功能的 Web 应用程序。

• Froala Editor 允许轻松上传图像和富文本编辑。

• ImageMagick 简化了大小调整，确保图像适合设定尺寸。

• 可定制的解决方案，包含验证、增强等选项。

这是我们的 HTML 代码编写器的图像调整大小功能的一个小演示：

请注意 2 个示例图像在上传之前如何具有横向方向以及它们在上传之后如何变化。现在，阅读更多内容以使用具有图像调整大小功能的基于 ASP.NET 的 HTML 代码编写器。有关更多详细信息，请随时查看我们的 .NET 图像调整大小文档。现在让我们设置应用程序。

设置应用程序

在进入开发部分之前，让我们先看看我们将使用的工具：

• ASP.NET Core：Visual Studio 附带的开源 Web 应用程序框架

• ImageMagick：用于增强图像的广泛开源软件套件

• Froala：强大的所见即所得 HTML 编辑器，支持 HTML 代码编辑、图片上传、Markdown 等

现在我们知道了我们需要什么，让我们执行以下步骤来创建我们的项目：

1. 打开 Visual Studio 并创建一个新项目。

2. 选择“ASP.NET Core Web 应用程序（Razor 页面）模板。在我们的例子中，项目名称是 FroalaImageResizeDemo.

3. 选择“.NET 8.0（长期支持）”作为框架。

4. 点击“创建”。

接下来，让我们通过 CDN 添加 Froala 编辑器：

1. 打开Pages >下的“_Layout.cshtml”文件共享目录。

2. 在 部分添加 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.

1. 在解决方案资源管理器中，右键单击项目名称并选择“管理 NuGet 包。”

2. 在“浏览”选项卡下，搜索“Magick.NET-Q8-AnyCPU”并单击安装按钮。

最后，让我们创建一个可以存储图像的文件夹。在解决方案资源管理器中，找到“wwwroot”文件夹。在其中创建一个名为“images”的新文件夹。现在我们已经配置了项目设置，是时候创建我们的图像调整大小 HTML 代码编写器了。

制作 HTML 代码编写器

首先，让我们创建一个新页面，我们可以在其中初始化和加载 Froala Editor。

1. 右键单击 Pages 文件夹。

2. 选择添加> 新商品 > 剃刀页面。

3. 我们将其命名为“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 代码编写器的页面。然而，它仍然无法通过导航到达，所以让我们通过添加链接来解决这个问题：

1. 再次打开“_Layout.cshtml”。

2. 将以下代码片段添加到导航栏部分的

   中：
   

<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 的调整大小功能，我们需要首先创建一个新控制器：

1. 右键单击 Controllers 文件夹（如果不是由 IDE 生成，则创建一个）。

2. 选择添加> 新商品。

3. 在 ASP.NET Core 类别下，选择“API 控制器 - 空”。

4. 将其命名为“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）了！

以上是如何制作具有图像调整大小功能的 ASP.NET HTML 代码编写器的详细内容。更多信息请关注PHP中文网其他相关文章！