Blazor WebAssembly中通过JS Interop调用toDataURL无法保存HTML5 Canvas内容怎么办

• 你传入的_context是Blazor.Extensions.Canvas封装的托管代理对象，不是JS侧原生的CanvasRenderingContext2D实例，更不是HTMLCanvasElement实例，本身不具备toDataURL方法
• 你传入的BECanvasComponent类型的组件引用是Blazor的托管组件对象，同样不是JS侧的原生DOM对象，也无法调用原生DOM方法
• 额外说明：toDataURL本身就是HTMLCanvasElement（画布元素本身）的方法，不是画布上下文的方法，就算你传了真实的上下文对象也调用不了这个方法

方法1：通过canvas元素ID获取DOM调用（最简便） #

1. 给你的Razor组件里的BECanvas标签设置唯一的HTML Id属性：

<BECanvas @ref="CanvasReference" Id="drawingCanvas" Width="800" Height="600" />

2. 修改index.html里的JS函数，改为通过ID获取真实画布元素：

// 返回PNG的Base64字符串
function getCanvasPngBase64(canvasId) {
    const canvas = document.getElementById(canvasId);
    if(!canvas) throw new Error("未找到对应画布元素");
    return canvas.toDataURL("image/png");
}

// 可选：直接触发浏览器下载PNG，不需要C#侧处理Base64
function downloadCanvasPng(canvasId, fileName = "output.png") {
    const canvas = document.getElementById(canvasId);
    if(!canvas) throw new Error("未找到对应画布元素");
    const downloadLink = document.createElement("a");
    downloadLink.href = canvas.toDataURL("image/png");
    downloadLink.download = fileName;
    downloadLink.click();
}

3. C#侧调用对应方法即可：

// 仅获取Base64
string pngBase64 = await jsRuntime.InvokeAsync<string>("getCanvasPngBase64", "drawingCanvas");

// 直接触发下载
await jsRuntime.InvokeVoidAsync("downloadCanvasPng", "drawingCanvas", "我的绘图作品.png");

方法2：通过ElementReference传递（无硬编码ID） #

如果不想硬编码画布ID，也可以给BECanvas绑定ElementReference，直接传递给JS：

1. Razor组件中绑定元素引用：

<BECanvas @ref="CanvasReference" @ref:suppressField @bind-Element="canvasElement" Width="800" Height="600" />

@code {
    private ElementReference canvasElement;
    // 其余原有代码不变
}

2. 修改JS函数直接接收元素对象：

function getCanvasPngBase64(canvasElement) {
    return canvasElement.toDataURL("image/png");
}

3. C#侧调用时传入canvasElement即可

内容的提问来源于stack exchange，提问作者johnnymcmike