Delayed rendering of the image in ASP.Core

[artemiusgreat]

I'm trying to draw a set of images with SkiaSharp, convert them to byte array, and send to HttpContext stream. For some reason, every image is being displayed in the browser only when the next image has been rendered and sent to the HTTP stream.

• After rendering the 1st image, browser shows empty white area, no image
• After rendering the 2nd image, browser shows 1st image
• After rendering the 3rd image, browser shows 2nd image, and so on

Here is the Web API controller. Uncommenting second drawShapes call will make it work, but I would like to understand why image rendering is delayed. Maybe I just don't call some important method, like Flush or something similar?

Also, this is not an ASP issue, because I tried rendering images with System.Drawing.Common and images were rendered in real time without delay.

Does anybody know what is missing in this method?

[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)
    }
  });
}

Reproducible sample

[ojb500]

Docs for SKImage.FromBitmap say it can make a copy of the pixels, so you are sending back the image as it looked before you started drawing on the canvas

Either call SKImage.FromBitmap only after drawing is done, or possibly just use SKBitmap.Encode to encode directly from the bitmap

I would dispose the canvas as well to make sure all drawing is flushed, maybe it's not essential here but it's a good practice.

[artemiusgreat]

Disposing didn't help, but calling method on bitmap directly did the job. Thanks.

//res = image.Encode(SKEncodedImageFormat.Webp, 100).ToArray();  // wrong
res = map.Encode(SKEncodedImageFormat.Webp, 100).ToArray();        // correct