Práce s obrázky v ASP.NET Core Blazor

Tento článek popisuje běžné scénáře práce s obrázky v Blazor aplikacích.

Dynamické nastavení zdroje obrázku

Následující příklad ukazuje, jak dynamicky nastavit zdroj image s polem C#.

Příklad v této části:

• Získejte tři image z libovolného zdroje nebo klikněte pravým tlačítkem na každý z následujících obrázků a uložte je místně. Pojmenujte obrázky image1.png, image2.pnga image3.png.

  

• Obrázky umístěte do nové složky pojmenované images v kořenovém adresáři aplikace (wwwroot). Použití images složky je pouze pro demonstrační účely. Obrázky můžete uspořádat v libovolném rozložení složky, které chcete, včetně poskytování obrázků přímo ze wwwroot složky.

V následující komponentě ShowImage1:

• Zdroj image (src) je dynamicky nastaven na hodnotu imageSource v jazyce C#.
• Metoda ShowImage aktualizuje imageSource pole na základě argumentu obrázku id předaného metodě.
• Vykreslená tlačítka volají metodu ShowImage s argumentem obrázku pro každý ze tří dostupných obrázků ve images složce. Název souboru se skládá pomocí argumentu předaného metodě a odpovídá jednomu ze tří obrázků ve images složce.

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";
    }
}

Předchozí příklad používá pole jazyka C# k uložení zdrojových dat obrázku, ale k uložení dat můžete použít také vlastnost jazyka C#.

Poznámka:

Nepoužívejte proměnnou smyčky přímo ve výrazu lambda, například i v předchozím příkladu smyčky for . V opačném případě se stejná proměnná používá ve všech výrazech lambda, což vede k použití stejné hodnoty ve všech výrazech lambda. Zachyťte hodnotu proměnné v místní proměnné. V předchozím příkladu:

• Proměnná i smyčky je přiřazena .imageId
• imageId se používá ve výrazu lambda.

Alternativně použijte smyčku foreach s Enumerable.Range, která netrpí předchozím problémem:

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

Další informace najdete v tématu ASP.NET Zpracování událostí CoreBlazor.

Streamování dat obrázků

Image může být přímo odeslána klientovi pomocí Blazorfunkcí interoperability streamování místo hostování image na veřejné adrese URL.

Příklad v této části streamuje zdrojová data obrázků pomocí zprostředkovatele komunikace JavaScriptu (JS). Následující setImageJS funkce přijímá <img> značku id a datový stream obrázku. Funkce provede následující kroky:

• Načte zadaný datový proud do objektu ArrayBuffer.
• Blob Vytvoří pro zabalení objektu ArrayBuffer.
• Vytvoří adresu URL objektu, která bude sloužit jako adresa obrázku, který se má zobrazit.
• <img> Aktualizuje prvek zadaným imageElementId adresou URL objektu, který byl právě vytvořen.
• Aby se zabránilo nevracení paměti, funkce volá revokeObjectURL , aby po dokončení práce s obrázkem zlikvidovaly adresu URL objektu.

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

Poznámka:

Obecné pokyny k JS umístění a doporučení pro produkční aplikace najdete v tématu o umístění JavaScriptu v aplikacích ASP.NET CoreBlazor.

ShowImage2 Následující komponenta:

• Vloží služby pro a System.Net.Http.HttpClientMicrosoft.JSInterop.IJSRuntime.
• <img> Obsahuje značku pro zobrazení obrázku.
• Má metodu jazyka GetImageStreamAsync C#, která načte Stream image. Produkční aplikace může dynamicky generovat image na základě konkrétního uživatele nebo načíst image z úložiště. Následující příklad načte avatar .NET pro dotnet úložiště GitHub.
• Má metodu SetImageAsync , která se aktivuje na výběru tlačítka uživatelem. SetImageAsync provede následující kroky:
  • Načte Stream z GetImageStreamAsync.
  • Zabalí do objektu StreamDotNetStreamReference, který umožňuje streamování dat obrázku do klienta.
  • Vyvolá javascriptovou setImage funkci, která přijímá data v klientovi.

Poznámka:

Aplikace na straně serveru používají k odesílání požadavků vyhrazenou HttpClient službu, takže vývojář aplikace na straně Blazor serveru nevyžaduje žádnou akci k registraci HttpClient služby. Aplikace na straně klienta mají při vytváření aplikace ze Blazor šablony projektu výchozí HttpClient registraci služby. HttpClient Pokud v souboru aplikace na straně klienta není k dispozici Program registrace služby, zadejte ji přidáním builder.Services.AddHttpClient();. Další informace najdete v tématu Vytváření požadavků HTTP pomocí IHttpClientFactory v 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);
    }
}

Další materiály

• nahrávání souborů ASP.NET Core Blazor
• Nahrávání souborů: Nahrání náhledu obrázku
• soubory ASP.NET Core Blazor ke stažení
• Volání metod .NET z funkcí JavaScriptu v ASP.NET Core Blazor
• Volání funkcí JavaScriptu z metod .NET v ASP.NET Core Blazor
• Blazorukázky úložiště GitHub () (dotnet/blazor-samplespostup stažení)