Common Blazor Code Snippet

1

<img Class="@($"hello{variable}")" Width="64px" Height="64px" />

1

string version = Environment.Version.ToString();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

@page "/"  
<InputFile multiple OnChange="@HandleFileInput" />
@code 
{ 
    List<string> _items = new();
    async Task HandleFileInput(InputFileChangeEventArgs e)
    { 
        foreach (var item in e.GetMultipleFiles())
        {
            using var stream = item.OpenReadStream();
            using var ms = new MemoryStream();
            await stream.CopyToAsync(ms);
            _items.Add($"data:{item.ContentType};base64,{Convert.ToBase64String(ms.ToArray())}");
        } 
    } 
     
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

@using System.IO
<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ButtonTemplate>
        <MudFab HtmlTag="label"
                Color="Color.Secondary"
                Icon="@Icons.Material.Filled.Image"
                Label="Load picture"
                for="@context.Id" />
    </ButtonTemplate>
</MudFileUpload>

@if(ImageUri!="")
{
    <MudImage Src="@ImageUri" Width="400" Height="400" /> 
}

@code {

    string ImageUri="";
    private async Task UploadFiles(IBrowserFile file)
    { 
        var image = await file.RequestImageFileAsync("image/png", 600, 600);

        using Stream imageStream = image.OpenReadStream(1024 * 1024 * 10);
        
        using MemoryStream ms = new();
        //copy imageStream to Memory stream
        await imageStream.CopyToAsync(ms);

        //convert stream to base64
        ImageUri = $"data:image/png;base64,{Convert.ToBase64String(ms.ToArray())}";
    }
}

1
2
3

window.blazorKeyPressed = function() {
    
};

1
2
3
4
5

[Inject] protected IJSRuntime JSRuntime { get; set; } = null!;
async Task CallJavascript()
{
    await JSRuntime.InvokeVoidAsync("blazorKeyPressed");
}

1
2
3
4
5

window.blazorKeyPressed = function(dotnetHelper) {
    document.addEventListener('keyup', function(event) {
        dotnetHelper.invokeMethodAsync('OnArrowKeyPressed', event.key);
    });
};

1
2
3
4
5
6
7
8

[Inject] protected IJSRuntime JSRuntime { get; set; } = null!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("blazorKeyPressed", DotNetObjectReference.Create(this));
    }
}

1
2
3
4
5

[JSInvokable]
public void OnArrowKeyPressed(string key)
{
    
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

window.downloadImage = (base64Image, fileName) => {
    const byteCharacters = atob(base64Image);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const blob = new Blob([byteArray]);
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

window.generateImage = function (id) {
    html2canvas(document.getElementById(id)).then(function (canvas) {
        var image = canvas.toDataURL('image/png');

        var a = document.createElement('a');
        a.href = image;
        a.download = 'generated_image.png';
        a.click();
    });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

window.downloadImageUrl = (imageUrl, fileName) => {
    fetch(imageUrl)
        .then(response => response.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            // Set the file name
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        })
        .catch(error => console.error('Error downloading image:', error));
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

byte[] ConvertSKBitmapToByteArray(SKBitmap bitmap, SKEncodedImageFormat format)
{
    using (var image = SKImage.FromBitmap(bitmap))
    using (var data = image.Encode(format, 100))
    {
        return data.ToArray();
    }
}
var arr = bmp.Bytes;// ConvertSKBitmapToByteArray(bmp, SKEncodedImageFormat.Png);
await JSRuntime.InvokeVoidAsync("downloadImage", Convert.ToBase64String(arr), "image.png");
await JSRuntime.InvokeVoidAsync("downloadImageUrl", $"https://picsum.photos/200/300", "image.png");
await JSRuntime.InvokeVoidAsync("generateImage", IDOfImageToDownload); // element as canvass as image