Viewing an image captured in a Blazor Web Assembly PWA

Question

Following on from the example Access Device Camera with Blazor I would like to view the image on the same page. So far I have found several older examples using JS but I think I should stick to native Blazor.

I think this is the start, but have failed to reference the file that was selected.

<p>
    <h1>My Camera App</h1>
</p>
<input @onchange="updateCanvas" id="capturedPic" type="file" accept="image/*" capture>
<br />
<canvas id="picCanvas"> </canvas>
<br />
<br />
@code
{
    public void updateCanvas()
    {
        //Code to place captured image in the canvas;

    }

}

Answer 1

Following the .NET5 introduction of InputFile, I have the following solution.

The max size of an image is 500K so the code converts the camera photo to a 100x100 thumbnail.

Many thanks to Daniel https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/ and Naveen https://www.learmoreseekmore.com/2020/10/blazor-webassembly-fileupload.html

   <div>
        <InputFile OnChange="@OnFileSelection"></InputFile>
        <div class="row">
            <img src="@imgUrl">
        </div>
    </div>
    @code{
        string imgUrl = string.Empty;
        private async Task OnFileSelection(InputFileChangeEventArgs e)
        {
            IBrowserFile imgFile = e.File;
            string imageType = imgFile.ContentType;
            var resizedImageFile = await imgFile.RequestImageFileAsync(imageType, 100, 100);
            var buffers = new byte[resizedImageFile.Size];
            await resizedImageFile.OpenReadStream().ReadAsync(buffers);
            imgUrl = $"data:{imageType};base64,{Convert.ToBase64String(buffers)}";
        }
    }