'I cant dynamical update image in blazor canvas
I am trying update img from src=@string, browser save image cache, and then draw first image constantly, but I want to update the image dynamically, from byte array. I turn off save cache function, and then nothing is drawn anymore, but I can update the @string and write it to console, where I see that string was updated. Also should say that I can update image when use onclick event, but its not what I want.
MyCode
@page "/"
@inject IJSRuntime JsRuntime;
<div>
<img src="@Image64" @ref="imageRef" hidden/>
</div>
<div id="canvasHolder" style="position: fixed; width: 100%; height: 100%">
<BECanvas Width="1000" Height="1000" @ref="CanvasRef"></BECanvas>
</div>
@code{
protected BECanvasComponent CanvasRef;
ElementReference imageRef;
Canvas2DContext ctx;
public string Image64 = "100";
Random rand = new Random();
PngFormat pngFormat = PngFormat.Instance;
byte[] arr = new byte[2000000];
Image<Rgba32> map;
int countX = 0;
int countY = 0;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
this.ctx = await CanvasRef.CreateCanvas2DAsync();
await JsRuntime.InvokeAsync<object>("initRenderJS", DotNetObjectReference.Create(this));
await base.OnInitializedAsync();
}
protected override async Task OnInitializedAsync()
{
System.Console.WriteLine("Mario");
Image64 = "data:image/png;base64,.."; //+ "?nocache=<?php echo time(); ?>";
}
[JSInvokable]
public async ValueTask RenderInBlazor(float timeStamp)
{
countX += 15;
countY += 10;
await this.ctx.ClearRectAsync(0, 0, 1000, 1000);
rand.NextBytes(arr);
System.Console.WriteLine("1");
Image64 = Convert.ToBase64String(arr); //+ "?nocache=<?php echo time(); ?>";
await this.ctx.DrawImageAsync(imageRef, countX, countY, 400, 400);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
