Блог

Я пытаюсь создать рудиментарное приложение для рисования, используя Blazor Wasm в качестве учебного упражнения. Рисование на холсте с помощью API, предоставляемого Blazor.Расширения.Холст, кажется, работает нормально, но я пытаюсь сохранить содержимое холста в формате PNG, и у меня возникают проблемы. Так как в оболочке C# для этого нет метода, который Blazor.Расширения.Canvas предоставляет, у меня есть простая функция JS внутри тега скрипта в index.html:

 function saveCanvasContents(canvcont) //this parameter is supposed to be the canvas context object {  return canvcont.toDataURL(); }  

Который вызывается из компонента C# следующим образом:

 Object testObject = await jsRuntime.InvokeAsynclt;Objectgt;("saveCanvasContents", new object[] {_context});  

_context вот контекст холста расширений Blazor, который генерируется в OnAfterRenderAsync by _context = await CanvasReference.CreateCanvas2DAsync(); .

Во всяком случае, запуск этого приложения производится Microsoft.JSInterop.JSException: canvcont.toDataURL is not a function в консоли браузера. Моя интуиция здесь заключалась бы в том, что это связано с тем, что все, что я передаю, не является элементом HTMLCanvasElement и как таковое не имеет toDataURL. Передача ему ссылки на компонент canvas (ссылка на canvas выше, она имеет тип BECanvasComponent) дает тот же результат. Я неправильно понимаю что-то фундаментальное в JS-взаимодействии Blazor / JS в целом, или в Blazor есть лучший способ сделать это?

Понял это. Я должен был передать метод мой _context.Canvas . Все остальное, что я передал, относилось к компоненту BECanvas, который обертывает холст HTML5, а не обычный старый HTML-холст, поэтому было бы логично, что у одного из них нет метода toDataURL. Удачи всем, кто найдет это в будущем.