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 }}