Estoy tratando de crear una aplicación de pintura rudimentaria usando Blazor Wasm como ejercicio de aprendizaje. Dibujar en el lienzo a través de la API proporcionada por Blazor.Extensions.Canvas parece funcionar bien, pero estoy tratando de guardar el contenido del lienzo en un PNG y tengo problemas. Dado que no existe un método para esto en el contenedor de C# que proporciona Blazor.Extensions.Canvas, tengo una función JS simple dentro de una etiqueta de secuencia de comandos en index.html:
function saveCanvasContents(canvcont) //this parameter is supposed to be the canvas context object { return canvcont.toDataURL(); }Que se llama desde el componente C # de esta manera:
Object testObject = await jsRuntime.InvokeAsync<Object>("saveCanvasContents", new object[] {_context}); _context aquí es el contexto de Blazor Extensions Canvas, que se genera en OnAfterRenderAsync mediante _context = await CanvasReference.CreateCanvas2DAsync(); .
De todos modos, ejecutar esto produce Microsoft.JSInterop.JSException: canvcont.toDataURL is not a function en la consola del navegador. Mi intuición aquí sería que esto se debe a que lo que sea que esté pasando no es un HTMLCanvasElement y, como tal, no tiene un toDataURL. Pasarle la referencia al componente del lienzo (CanvasReference arriba, es del tipo BECanvasComponent) tiene el mismo resultado. ¿Estoy malinterpretando algo fundamental sobre la interoperabilidad JS/JS de Blazor en general, o hay una mejor manera de hacerlo en Blazor?
Lo averigué. Tuve que pasar el método my _context.Canvas . Todo lo demás que pasé se refería a un componente BECanvas, que envuelve un lienzo HTML5, en lugar de un lienzo HTML antiguo normal, por lo que tendría sentido que uno de esos no tenga un método toDataURL. Buena suerte a cualquiera que encuentre esto en el futuro.