HKC_Blazor/MasaBlazorApp3/Pages/SignatureDialog.razor

@page "/signature/{user}"
@page "/signature"
@layout EmptyLayout
<RadzenStack AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center">
    @if (user.Sign != null)
    {
        <RadzenImage Path="@($"data:image/png;base64,{Convert.ToBase64String(user.Sign)}")" Style="width:160px;height:80px;" />
    }
    <div class="border">
        <canvas />
    </div>
    <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center">
        <RadzenButton Text="清除" Click="@(() => handleClear())" />
        <RadzenButton Text="撤销" Click="@(() => handleUndo())" />
        <RadzenButton Text="保存" Click="@(() => handlePreview())" />
    </RadzenStack>
</RadzenStack>


<div>
</div>

@code {
    @inject IJSRuntime JsRuntime;
    @inject NotificationService _message;
    @inject IUserDao userDao;
    private IJSObjectReference module;
    @inject DialogService dialogService;
    [Parameter] public Pojo.User user { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 导入。路径是相对wwwroot写的，其他位置参考顶部链接
            module = await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./signatureInit.js");
            await module.InvokeVoidAsync("createSignatrue");
        }

    }

    async Task handleClear()
    {
        await module.InvokeVoidAsync("clear");
    }
    async Task handleUndo()
    {
        await module.InvokeVoidAsync("undo");
    }
    async Task handlePreview()
    {
        bool flag = await module.InvokeAsync<bool>("isEmpty");
        if (flag)
        {
        }
        else
        {
            string base64 = await module.InvokeAsync<string>("getPNG");

            await userDao.UpdateSign(user.Id, base64.Split(",")[1]);

            dialogService.Close(true);

        }
    }

}