ASP.NET Core'da görüntülerle çalışma Blazor

Makale
04/12/2024

Not

Bu, bu makalenin en son sürümü değildir. Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Önemli

Bu bilgiler, ticari olarak piyasaya sürülmeden önce önemli ölçüde değiştirilebilen bir yayın öncesi ürünle ilgilidir. Burada verilen bilgilerle ilgili olarak Microsoft açık veya zımni hiçbir garanti vermez.

Geçerli sürüm için bu makalenin .NET 8 sürümüne bakın.

Bu makalede, uygulamalarda görüntülerle Blazor çalışmaya yönelik yaygın senaryolar açıklanmaktadır.

Dinamik olarak görüntü kaynağı ayarlama

Aşağıdaki örnekte, C# alanıyla bir görüntünün kaynağının dinamik olarak nasıl ayarlanacağı gösterilmektedir.

Bu bölümdeki örnek için:

Herhangi bir kaynaktan üç görüntü alın veya yerel olarak kaydetmek için aşağıdaki görüntülerin her birine sağ tıklayın. Görüntüleri image1.png, image2.pngve image3.pngolarak adlandırın.
Görüntüleri uygulamanın web kökünde ()wwwroot adlı images yeni bir klasöre yerleştirin. Klasörün kullanımı images yalnızca gösterim amaçlıdır. Görüntüleri doğrudan klasörden sunma dahil, tercih ettiğiniz herhangi bir klasör düzeninde wwwroot düzenleyebilirsiniz.

Aşağıdaki ShowImage1 bileşeninde:

Görüntünün kaynağı (src), C# dilinde değerine imageSource dinamik olarak ayarlanır.
yöntemi, ShowImage yöntemine imageSource geçirilen bir görüntü id bağımsız değişkenine göre alanı güncelleştirir.
İşlenen düğmeler, klasördeki ShowImage kullanılabilir üç görüntünün images her biri için bir görüntü bağımsız değişkeniyle yöntemini çağırır. Dosya adı, yöntemine geçirilen bağımsız değişken kullanılarak oluşturulur ve klasördeki images üç görüntüden biriyle eşleşir.

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

Yukarıdaki örnekte görüntünün kaynak verilerini tutmak için bir C# alanı kullanılır, ancak verileri tutmak için bir C# özelliği de kullanabilirsiniz.

Not

Önceki for döngü örneğinde olduğu gibi i bir lambda ifadesinde doğrudan bir döngü değişkeni kullanmaktan kaçının. Aksi takdirde, aynı değişken tüm lambda ifadeleri tarafından kullanılır ve bu da tüm lambdalarda aynı değerin kullanılmasına neden olur. Değişkenin değerini yerel değişkende yakalayın. Yukarıdaki örnekte:

Döngü değişkeni i öğesine imageIdatanır.
imageId lambda ifadesinde kullanılır.

Alternatif olarak, önceki sorundan muzdarip olmayan ile Enumerable.Rangebir foreach döngü kullanın:

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

Daha fazla bilgi için bkz . ASP.NET Core Blazor olay işleme.

Görüntü verilerini akışla aktarma

Görüntüyü genel URL'de barındırmak yerine 'nin akış birlikte çalışma özellikleri kullanılarak Blazorbir görüntü doğrudan istemciye gönderilebilir.

Bu bölümdeki örnek, JavaScript (JS) birlikte çalışma kullanarak görüntü kaynağı verilerini akışla aktarıyor. Aşağıdaki setImageJS işlev, görüntünün etiketini id ve veri akışını kabul eder<img>. işlevi aşağıdaki adımları gerçekleştirir:

Sağlanan akışı bir ArrayBufferiçine okur.
kaydırmak ArrayBufferiçin bir Blob oluşturur.
Resmin gösterileceği adres olarak hizmet vermek için bir nesne URL'si oluşturur.
<img> öğesini belirtilen ile imageElementId yeni oluşturulan nesne URL'si ile Güncelleştirmeler.
Bellek sızıntılarını önlemek için işlev, bileşen bir görüntüyle çalışmayı bitirdiğinde nesne URL'sini atmak için çağırır revokeObjectURL .

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

Not

Konum hakkında genel yönergeler JS ve üretim uygulamalarına yönelik önerilerimiz için bkz . ASP.NET Core Blazor uygulamalarında JavaScript konumu.

Aşağıdaki ShowImage2 bileşen:

ve System.Net.Http.HttpClient Microsoft.JSInterop.IJSRuntimeiçin hizmetler ekler.
<img> Görüntü görüntülemek için bir etiket içerir.
GetImageStreamAsync Bir görüntü için almak için bir Stream C# yöntemi vardır. Üretim uygulaması, belirli bir kullanıcıyı temel alan bir görüntüyü dinamik olarak oluşturabilir veya depolama alanından bir görüntü alabilir. Aşağıdaki örnek GitHub deposu için .NET avatarını dotnet alır.
Düğmenin kullanıcı tarafından seçilmesinde tetiklenen bir SetImageAsync yöntemi vardır. SetImageAsync aşağıdaki adımları gerçekleştirir:
- 'den GetImageStreamAsyncöğesini Stream alır.
- görüntü verilerinin Stream istemciye akışına izin veren bir DotNetStreamReferenceiçinde sarmalar.
- İstemcideki setImage verileri kabul eden JavaScript işlevini çağırır.

Not

Sunucu tarafı uygulamalar istekte bulunmak için ayrılmış HttpClient bir hizmet kullandığından, sunucu tarafı Blazor uygulamasının geliştiricisi hizmeti kaydetmek için herhangi bir HttpClient eylem gerçekleştirmez. Uygulama bir proje şablonundan Blazor oluşturulduğunda istemci tarafı uygulamaların varsayılan HttpClient hizmet kaydı vardır. HttpClient İstemci tarafı uygulamasının Program dosyasında bir hizmet kaydı yoksa, ekleyerek builder.Services.AddHttpClient();bir hizmet kaydı sağlayın. Daha fazla bilgi için, bkz. ASP.NET Core'da IHttpClientFactory kullanarak HTTP isteği yapma.

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

Share via

ASP.NET Core'da görüntülerle çalışma Blazor

Dinamik olarak görüntü kaynağı ayarlama

Görüntü verilerini akışla aktarma

Ek kaynaklar

Geri Bildirim

Ek kaynaklar