- 在JavaScript中编写保存canvas内容为DataURL的函数:
function saveCanvasToDataURL(canvasId) {
var canvas = document.getElementById(canvasId);
return canvas.toDataURL();
}
- 在Blazor组件中使用JS Interop调用JavaScript函数,并将返回的DataURL作为参数传递给C#方法:
using Microsoft.JSInterop;
public class CanvasComponent : ComponentBase
{
[Inject]
private IJSRuntime JSRuntime { get; set; }
private string imageDataUrl = "";
protected override async Task OnAfterRenderAsync()
{
var canvasId = "myCanvas";
// call JS function to save canvas to data URL
imageDataUrl = await JSRuntime.InvokeAsync("saveCanvasToDataURL", canvasId);
StateHasChanged();
}
private void SaveImageDataUrl()
{
Console.WriteLine(imageDataUrl);
// do something with the image data URL
}
}