Práce s obrázky v ASP.NET Core Blazor
Poznámka:
Toto není nejnovější verze tohoto článku. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.
Upozorňující
Tato verze ASP.NET Core se už nepodporuje. Další informace najdete v tématu .NET a .NET Core Zásady podpory. Aktuální verzi najdete ve verzi .NET 8 tohoto článku.
Důležité
Tyto informace se týkají předběžného vydání produktu, který může být podstatně změněn před komerčním vydáním. Microsoft neposkytuje žádné záruky, výslovné ani předpokládané, týkající se zde uváděných informací.
Aktuální verzi najdete ve verzi .NET 8 tohoto článku.
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.png
aimage3.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 zewwwroot
složky.
V následující komponentě ShowImage1
:
- Zdroj image (
src
) je dynamicky nastaven na hodnotuimageSource
v jazyce C#. - Metoda
ShowImage
aktualizujeimageSource
pole na základě argumentu obrázkuid
předaného metodě. - Vykreslená tlačítka volají metodu
ShowImage
s argumentem obrázku pro každý ze tří dostupných obrázků veimages
složce. Název souboru se skládá pomocí argumentu předaného metodě a odpovídá jednomu ze tří obrázků veimages
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";
}
}
@page "/show-image-1"
<h1>Dynamic Image Source Example</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";
}
}
@page "/show-image-1"
<h1>Dynamic Image Source Example</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í setImage
JS 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í objektuArrayBuffer
.- Vytvoří adresu URL objektu, která bude sloužit jako adresa obrázku, který se má zobrazit.
<img>
Aktualizuje prvek zadanýmimageElementId
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 prodotnet
ú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.
- Načte Stream z
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);
}
}
@page "/show-image-2"
@inject HttpClient Http
@inject IJSRuntime JS
<h1>Stream Image Data Example</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);
}
}
@page "/show-image-2"
@inject HttpClient Http
@inject IJSRuntime JS
<h1>Stream Image Data Example</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-samples
postup stažení)
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro