Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Significant delay loading an image into memorystream using C# Blazor web assembly

$
0
0

I'm writing Blazor web assembly C# code in VS Code to upload an image, process it and render it in the browser.

As it's web assembly - everything should run in the browser.

I have an AMD7 CPU, 64Gb of RAM - so this shouldn't cause any bottleneck.

An example image I'm uploading is: 1.3mb image, 2048x2048px, 72ppi - and my code is shown below.

All lines run within 400ms until it gets to Load Memory Stream into Image.

For the image file noted, it takes around 2 minutes and 35 seconds to carry out that one line.

Then with the image sharp library resize function, that takes another minute and 53 seconds to resize the image.

Can anyone see any reason why?

using var image = Image.Load(memoryStream);

...and...

image.Mutate(x => x.Resize(image.Width / 5, image.Height / 5));

...take so long?

Thanks, Mark

Full code:

@page "/Ir"@using SixLabors.ImageSharp;@using SixLabors.ImageSharp.PixelFormats;@using SixLabors.ImageSharp.Processing;@using SixLabors.ImageSharp.Processing.Processors;@using SixLabors.ImageSharp.Formats;@using SixLabors.ImageSharp.Formats.Png;@using SixLabors.ImageSharp.Processing.Processors.Dithering;@using SixLabors.ImageSharp.Processing.Processors.Transforms;@using System;@using System.IO;@using System.Threading.Tasks;@inject IJSRuntime JS<input type="file" id="imageUpload" @onchange="HandleFileUpload2" accept="image/*" />@code {    private string uploadedFileName { get; set; }    private async Task HandleFileUpload2(ChangeEventArgs e)    {        Console.WriteLine("In HandleFileUpload2");        var files = await JS.InvokeAsync<string[]>("getUploadedFiles", "imageUpload");        if (files.Length > 0)        {            uploadedFileName = Path.GetFileNameWithoutExtension(files[0]);            string base64Image = files[0];            // Convert base64 string to byte array            byte[] imageData = ConvertBase64ToByteArray(base64Image);            using var memoryStream = new MemoryStream(imageData);            // Delay begins on next line            using var image = Image.Load(memoryStream);            // Next significant delay begins on this line            image.Mutate(x => x.Resize(image.Width / 5, image.Height / 5));            string processedBase64Image = ConvertImageToBase64(image);            await JS.InvokeVoidAsync("renderImageToCanvasUpload", "mainCanvas", "previewCanvas", "storeCanvas", processedBase64Image);        }    }    private byte[] ConvertBase64ToByteArray(string base64Image)    {        int commaIndex = base64Image.IndexOf(',');        if (commaIndex != -1)        {            base64Image = base64Image.Substring(commaIndex + 1);        }        return Convert.FromBase64String(base64Image);    }    private string ConvertImageToBase64(Image image)    {        using var outputStream = new MemoryStream();        image.SaveAsPng(outputStream); // Assuming PNG format        outputStream.Position = 0; // Reset stream position after saving to it        var bytes = outputStream.ToArray(); // Get byte array from stream        return $"data:image/png;base64,{Convert.ToBase64String(bytes)}"; // Properly format it for HTML    }}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>