Resize Image (jpg) in Blazor WebAssembly?

Viewed 2619

What is the best way to resize an image that is uploaded on a Blazor client page. These are real simple images that I just wanted to have a consistent width and was hoping to use the System.Drawing, but that is not available in web assembly. I was hoping to do it on the client, but is it best to send it to a Controller for processing?

Thanks, Mike

2 Answers

.NET 5 has an extension method to IBrowserFile called RequestImageFileAsync. Per the documentation, it "Attempts to convert the current image file to a new one of the specified file type and maximum file dimensions."

We use a package PhotoSauce.MagicScaler for all images uploaded from any blazor page. https://photosauce.net/ I have no affiliation with this package / author etc. Just recommend it because it works so well.

There are lots of params that you can set in the ProcessImageSettings for width, method of resizing etc.

var settings = new ProcessImageSettings { Height = 250 };
using var outStream = new FileStream(thumbNailPathAndFile, FileMode.Create);
MagicImageProcessor.ProcessImage(pathAndFile, outStream, settings);
Related