查看在 Blazor Web Assembly PWA 中捕获的图像答案

【问题标题】：Viewing an image captured in a Blazor Web Assembly PWA查看在 Blazor Web Assembly PWA 中捕获的图像
【发布时间】：2021-07-05 18:36:06
【问题描述】：

从示例Access Device Camera with Blazor 开始，我想在同一页面上查看图像。到目前为止，我已经找到了几个使用 JS 的旧示例，但我认为我应该坚持使用原生 Blazor。

我认为这是开始，但未能引用所选文件。

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

    }

}

【问题讨论】：

标签： image blazor-client-side

【解决方案1】：

继.NET5引入InputFile之后，我有如下解决方案。

图像的最大尺寸为 500K，因此代码会将相机照片转换为 100x100 的缩略图。

非常感谢 Daniel https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-5-release-candidate-1/ 和 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)}";
        }
    }

【讨论】：