我正在嘗試使用 SkiaSharp 繪制一組影像,將它們轉換為位元組陣列,然后發送到HttpContext流。出于某種原因,只有在下一張影像被渲染并發送到 HTTP 流時,每張影像才會顯示在瀏覽器中。
- 渲染第一張影像后,瀏覽器顯示空白區域,沒有影像
- 渲染第二張圖片后,瀏覽器顯示第一張圖片
- 渲染第三張圖片后,瀏覽器顯示第二張圖片,依此類推
這是 Web API 控制器。取消注釋第二個drawShapes呼叫將使其作業,但我想了解為什么影像渲染會延遲。也許我只是不呼叫一些重要的方法,比如Flush或類似的東西?
此外,這不是 ASP 問題,因為我嘗試使用System.Drawing.Common渲染影像,并且影像被實時渲染,沒有延遲。
有人知道這種方法缺少什么嗎?
[Route("/source")]
public async Task Get()
{
// Initialize Skia
var res = new byte[1000];
var boundary = Guid.NewGuid().ToString();
var generator = new Random();
var map = new SKBitmap(250, 250);
var canvas = new SKCanvas(map);
var inPaint = new SKPaint
{
Color = SKColors.Black,
Style = SKPaintStyle.Fill,
FilterQuality = SKFilterQuality.High
};
var exPaint = new SKPaint
{
Color = SKColors.White,
Style = SKPaintStyle.Fill,
FilterQuality = SKFilterQuality.Low
};
// Create HTTP stream
Response.ContentType = "multipart/x-mixed-replace;boundary=" boundary;
var outputStream = Response.Body;
var cancellationToken = Request.HttpContext.RequestAborted;
// Create method posting images to HTTP stream
async Task drawShapes()
{
using (var image = SKImage.FromBitmap(map))
{
var pos = generator.Next(50, 150);
canvas.DrawRect(0, 0, 250, 250, exPaint);
canvas.DrawCircle(pos, pos, 20, inPaint);
res = image.Encode(SKEncodedImageFormat.Webp, 100).ToArray();
}
var header = $"--{ boundary }\r\nContent-Type: image/webp\r\nContent-Length: { res.Length }\r\n\r\n";
var headerData = Encoding.ASCII.GetBytes(header);
await outputStream.WriteAsync(headerData);
await outputStream.WriteAsync(res);
await outputStream.WriteAsync(Encoding.ASCII.GetBytes("\r\n"));
}
// Start HTTP stream
await Task.Run(async () =>
{
//while (true)
{
await drawShapes();
//await drawShapes(); // After uncommenting this shows the image (the previous one)
}
});
}
可重復的樣品
uj5u.com熱心網友回復:
這在 SkiaSharp 討論中得到了回答。 https://github.com/mono/SkiaSharp/discussions/1975
可能的解決方案是確保Encode僅在完成所有繪圖后才進行影像處理,或者呼叫Encode位圖而不是影像。
最簡單的就是替換這條線。
//res = image.Encode(SKEncodedImageFormat.Webp, 100).ToArray(); // wrong
res = map.Encode(SKEncodedImageFormat.Webp, 100).ToArray(); // correct
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/444902.html
上一篇:將DI物件傳遞給新類的建構式
