Работа с изображениями в ASP.NET Core Blazor

В этой статье описываются распространенные сценарии работы с изображениями в приложениях Blazor.

Динамическое задание источника изображения

В следующем примере показано, как динамически задать источник изображения с помощью поля C#.

Для примера в этом разделе:

• Получите три изображения из любого источника или щелкните правой кнопкой мыши каждое из следующих изображений, чтобы сохранить их локально. Присвойте изображениям имена image1.png, image2.png и image3.png.

  

• Поместите изображения в новую папку (images) в корневом каталоге документов приложения (wwwroot). Папка images используется только для демонстрации. Вы можете упорядочить изображения в любом удобном для вас расположении папок, включая отображение изображений непосредственно из папки wwwroot.

Следующий компонент ShowImage1:

• Источнику изображения (src) динамически присваивается значение imageSource в C#.
• Метод ShowImage обновляет поле imageSource на основе аргумента изображения id, переданного в метод.
• Отрисованные кнопки вызывают метод ShowImage с аргументом изображения для каждого из трех доступных изображений в папке images. Имя файла состоит из аргумента, переданного в метод, и соответствует одному из трех изображений в папке images.

ShowImage1.razor:

@page "/show-image-1"

<PageTitle>Show Image 1</PageTitle>

<h1>Show Image Example 1</h1>

@if (imageSource is not null)
{
    <p>
        <img src="@imageSource" />
    </p>
}

@for (var i = 1; i <= 3; i++)
{
    var imageId = i;
    <button @onclick="() => ShowImage(imageId)">
        Image @imageId
    </button>
}

@code {
    private string? imageSource;

    private void ShowImage(int id)
    {
        imageSource = $"images/image{id}.png";
    }
}

В предыдущем примере для хранения исходных данных изображения используется поле C#, но для хранения данных также можно использовать свойство C#.

Примечание.

Избегайте использования переменной цикла непосредственно в лямбда-выражении, например i в предыдущем for примере цикла. В противном случае одна и та же переменная будет использоваться во всех лямбда-выражениях, в результате чего значение будет одинаковым во всех лямбда-выражениях. Захват значения переменной в локальной переменной. В предыдущем примере:

• Переменной цикла i присваивается значение imageId.
• imageId используется в лямбда-выражении.

Кроме того, используйте цикл foreach с диапазоном Enumerable.Range, который не затронула предыдущая проблема:

@foreach (var imageId in Enumerable.Range(1,3))
{
    <button @onclick="() => ShowImage(imageId)">
        Image @imageId
    </button>
}

Дополнительные сведения см. в статье Обработка событий Blazor в ASP.NET Core.

Потоковая передача данных изображения

Изображение можно отправить клиенту напрямую с помощью функций потокового взаимодействия Blazor, а не размещать по общедоступному URL-адресу.

В примере из этого раздела исходные данные изображения передаются с помощью взаимодействия JavaScript (JS). Следующая функция JSsetImage принимает id тега <img> и поток данных для изображения. Эта функция выполняет следующие действия.

• Чтение предоставленного потока в ArrayBuffer.
• Создание Blob в качестве оболочки для ArrayBuffer.
• Создание URL-адреса объекта, который будет служить адресом для изображения.
• Указание в элементе <img> свойства imageElementId, для которого используется только что созданный URL-адрес объекта.
• Чтобы предотвратить утечку памяти, после завершения работы компонента с изображением функция вызывает revokeObjectURL для удаления URL-адреса объекта.

<script>
  window.setImage = async (imageElementId, imageStream) => {
    const arrayBuffer = await imageStream.arrayBuffer();
    const blob = new Blob([arrayBuffer]);
    const url = URL.createObjectURL(blob);
    const image = document.getElementById(imageElementId);
    image.onload = () => {
      URL.revokeObjectURL(url);
    }
    image.src = url;
  }
</script>

Примечание.

Общие рекомендации по JS расположению и нашим рекомендациям для рабочих приложений см. в расположении JavaScript в приложениях ASP.NET CoreBlazor.

Приведенный ниже компонент ShowImage2 делает следующее.

• Внедряет службы для System.Net.Http.HttpClient и Microsoft.JSInterop.IJSRuntime.
• Включает тег <img> для отображения изображения.
• Содержит метод C# GetImageStreamAsync для получения Stream изображения. Рабочее приложение может динамически создать изображение на основе конкретного пользователя или получить изображение из хранилища. В следующем примере извлекается аватар .NET для репозитория GitHub dotnet.
• Содержит метод SetImageAsync, который активируется при нажатии пользователем кнопки. SetImageAsync выполните следующие действия:
  • Извлекает Stream из GetImageStreamAsync.
  • Заключает Stream в DotNetStreamReference, чтобы выполнить потоковую передачу изображения клиенту.
  • Вызывает функцию JavaScript setImage, которая принимает данные на клиенте.

Примечание.

Серверные приложения используют выделенную HttpClient службу для выполнения запросов, поэтому для регистрации HttpClient службы не требуется никаких действий разработчиком серверного Blazor приложения. Клиентские приложения имеют регистрацию службы по умолчанию HttpClient при создании приложения из Blazor шаблона проекта. HttpClient Если регистрация службы отсутствует в Program файле клиентского приложения, укажите его, добавив builder.Services.AddHttpClient();его. Дополнительные сведения см. в статье Выполнение HTTP-запросов с помощью IHttpClientFactory в ASP.NET Core.

ShowImage2.razor:

@page "/show-image-2"
@inject HttpClient Http
@inject IJSRuntime JS

<PageTitle>Show Image 2</PageTitle>

<h1>Show Image Example 2</h1>

<p>
    <img id="image" />
</p>

<button @onclick="SetImageAsync">
    Set Image
</button>

@code {
    private async Task<Stream> GetImageStreamAsync()
    {
        return await Http.GetStreamAsync(
            "https://avatars.githubusercontent.com/u/9141961");
    }

    private async Task SetImageAsync()
    {
        var imageStream = await GetImageStreamAsync();
        var dotnetImageStream = new DotNetStreamReference(imageStream);
        await JS.InvokeVoidAsync("setImage", "image", dotnetImageStream);
    }
}

Дополнительные ресурсы

• Отправка файлов в ASP.NET Core Blazor
• Отправка файлов: предварительная версия образа
• Скачивание файлов ASP.NET Core Blazor
• Вызов методов .NET из функций JavaScript в Blazor ASP.NET Core
• Вызов функций JavaScript из методов .NET в ASP.NET Core Blazor
• Blazorпримеры репозитория GitHub (dotnet/blazor-samplesкак скачать)