Blazor webassembly: canvas.toDataUrl()?

Question

使用Blazor WebAssembly(3.2.0预览5(和BlazorLeaflet来显示地图。在这个地图上，我想放一个imageOverlay，我希望能够或多或少地更新(有时根本不更新，有时每秒更新1-2次(。使用一个普通的js，通过以下代码片段(与Leaflet.Overlay.Rotated插件一起(可以很容易地做到这一点：最初：

var map = L.map('mapElement', {
crs: crs,
continuousWorld: true,
center: latlong, // Set center location
zoom: 9, // Set zoom level
minzoom: 0,
maxzoom: 13
});
var overlay = L.imageOverlay.rotated(imageurl, point1, point2, point3, {
opacity: 0.4,
interactive: true,
attribution: "MyUpdatingImage"
}); 
map.addLayer(overlay);

然后更新图像只需执行以下操作：

var ctx = canvas.getContext("2d");
var imageData = ctx.createImageData(width, height);
//..
// Populating imageData.data with values for r,g,b,a (0-255)
//..
overlay.setUrl(canvas.toDataURL());

我已经简单地测试了这个Blazor Canvas插件，但不幸的是，据我所见，没有toDataURL((等效的方法/函数。。有人知道Blazor WebAssembly中的另一种方法吗？

Answer 1

您仍然可以这样做，只需使用IJSRuntime服务从Blazor WASM调用一个JavaScript方法并进行更新。示例：

@inject IJSRuntime JsRuntime
<canvas id="myMap"></canvas>

@code {
private async Task RefreshMap(){
await JsRuntime.InvokeVoidAsync("myJsMethod", "myNewMapData"); // send any data required
}
}