toDataURL() 无法在 Blazor Webassembly 中使用 JS 互操作保存 HTML5 画布的内容？

Posted 2023-04-12

【中文标题】toDataURL() 无法在 Blazor Webassembly 中使用 JS 互操作保存 HTML5 画布的内容？

【英文标题】：toDataURL() can't save contents of HTML5 canvas with JS Interop in Blazor Webassembly?

【发布时间】：2021-12-07 19:56:59

【问题描述】：

我正在尝试使用 Blazor Wasm 作为学习练习来构建一个基本的绘图应用程序。通过 Blazor.Extensions.Canvas 提供的 API 绘制到画布似乎工作正常，但我正在尝试将画布的内容保存到 PNG 并且我遇到了问题。由于在 Blazor.Extensions.Canvas 提供的 C# 包装器中没有此方法，因此我在 index.html 的脚本标记内有一个简单的 JS 函数：

function saveCanvasContents(canvcont) //this parameter is supposed to be the canvas context object

    return canvcont.toDataURL();

从 C# 组件调用如下：

Object testObject = await jsRuntime.InvokeAsync<Object>("saveCanvasContents", new object[] _context);

_context 这里是 Blazor Extensions Canvas 的上下文，由_context = await CanvasReference.CreateCanvas2DAsync(); 在OnAfterRenderAsync 中生成。

无论如何，运行它会在浏览器控制台中生成Microsoft.JSInterop.JSException: canvcont.toDataURL is not a function。我的直觉是，这是因为我传递的不是 HTMLCanvasElement，因此没有 toDataURL。将对画布组件的引用（上面的 CanvasReference，它的类型为 BECanvasComponent）传递给它具有相同的结果。我是否误解了 Blazor 的 JS interop / JS 的基本知识，还是在 Blazor 中有更好的方法来解决这个问题？

【参考方案1】：

想通了。我必须通过_context.Canvas 的方法。我传递给它的所有其他内容都是指一个 BECanvas 组件，它包装了一个 HTML5 画布，而不是一个常规的旧 HTML 画布，因此其中一个没有 toDataURL 方法是有道理的。祝以后发现这个的人好运。