canvas.toDataUrl()？

Question

使用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());

我对这个布拉斯帆布插件进行了简要测试，但不幸的是，据我所见，没有toDataURL()等效方法/函数。有没有人知道在Blazor WebAssembly中有一种替代方法？

Answer 1

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

@inject IJSRuntime JsRuntime

<canvas id="myMap"></canvas>

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