使用ASP.NET Core和ImageSharp上傳圖像並調整其大小

在將我們的Web應用程序遷移到ASP.NET Core時，我不得不為用戶找到一種新的方式來上傳和調整個人資料照片。 我們在ASP.NET MVC中使用了WebImage類，但不幸的是，Core中沒有該類。 在這篇文章中，我將向您展示如何使用ASP.NET Core和ImageSharp庫中的文件支持解決該問題。

 

 

使用ASP.NET Core和ImageSharp上傳圖像並調整其大小

我們面對現實吧。 雖然 ASP.NET Core 已經是一個不錯的 web 框架，但是仍然缺少一些東西(或者故意遺漏以便為其他選擇騰出空間)。 調整圖像的大小就是這樣一個功能 .Net 中的 WebImage 類是一個相當令人印象深刻的小幫助器，當需要允許用戶上傳、圖像處理等時，它可以滿足大多數需求。 但是正如前面提到的，WebImage 還沒有移植到 ASP.NET Core 。

 

讓我們先來看看 ASP.NET Core 中的文件上傳。 為了實現一些后端，我將首先創建一個簡單的客戶端:

<form enctype="multipart/form-data" method="post" action="/home/upload">
    <input type="file" name="file" />
    <input type="submit" />
</form>

只是一個帶有文件選擇器（丑陋的）HTML表單：

 

 

 

要將/ home / upload實現為接受文件的操作，可以使用Microsoft.AspNetCore.Http命名空間中提供的IFormFile接口：

[HttpPost]
public IActionResult Upload(IFormFile file)
{
    // ...
    return Ok();
}

如果將斷點放在Upload方法中，則會看到有關所選文件的元數據：

 

現在是調整大小的部分。 既然我們不再能夠訪問 WebImage 類，我將安裝一個非常棒的替代品 ImageSharp:

Install-Package SixLabors.ImageSharp -IncludePrerelease

 

ImageSharp目前處於測試階段，但效果很好。 ImageSharp具有一個Image類，該類在很多方面都類似於WebImage。 它接受發布的文件作為流：

using var image = Image.Load(file.OpenReadStream());

一旦獲得圖像的實例，就可以使用Mutate方法開始對其進行操作。 對於這篇文章，我想將圖像調整為固定大小：

image.Mutate(x => x.Resize(256, 256));

最后，我們可以將圖像保存到流或文件中：

image.Save("filename");

同樣，使用Image類有很多可能性，因此請查閱文檔。

這是完整的Upload方法：

 

[HttpPost]
public IActionResult Upload(IFormFile file)
{
    using var image = Image.Load(file.OpenReadStream());
    image.Mutate(x => x.Resize(256, 256));
    image.Save("...");
    return Ok();
}