How to compress an image from IFormFile before upload to the server ASP.Net Core

Question

I have a problem, I'm creating an app in net core, to upload kids information, but, the main problem is than all the image I have are from my phone and you know than we are talking about 9-15 MB per picture, so, I know than I can tell the user "There's a limitation" but, I thinks than that its not useful, so, There's a way to reduce the size of the image loosing the less quality possible?.

This is my Method

Class

public IFormFile ImageFile { get; set; }

Method

if (vm.ImageFile != null && vm.ImageFile.Length > 0)
{
    var guid = Guid.NewGuid().ToString();
    var file = $"{guid}.jpg";

    path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot\\images\\Kids", file);

    using (var stream = new FileStream(path, FileMode.Create))
    {
        //var convertedImage = MagicSolutionGivenByTheAwsomeStackOverFlowCommunity
        await vm.ImageFile.CopyToAsync(stream);
    }

}

Layout

<form asp-action="Create" enctype="multipart/form-data">
 <input type="hidden" asp-for="Imagen"/>
  <div class="col-sm-4">
   <label asp-for="Imagen" class="control-label"></label>
   <div>
    <input asp-for="ImageFile" class="form-control filestyle"
           type="file" data-classbutton="btn btn-secondary"
           data-classinput="form-control inline"
           data-icon="&lt;span class='fa fa-upload mr'&gt;&lt;/span&gt;" />
   </div>
  <span asp-validation-for="Imagen" class="text-danger"></span>
 </div>
</form>

Perhaps take a look at something like the ImageSharp for .Net Core (https://github.com/SixLabors/ImageSharp). They have an example of an image resize right on the first page. The exact method you use to resize will depend on how you want to do that (percent, fixed size, etc). — Bryan Lewis, Feb 05 '20 at 00:35
[Here](https://stackoverflow.com/questions/14672746/how-to-compress-an-image-via-javascript-in-the-browser) you can find information — svstnv, Feb 06 '20 at 10:27
Are you concerned about the time it takes to upload or the amount of storage you need to store the pictures on your side? If it's the first, you would need to perform the compression on the client side. Otherwise on the server. — Riscie, Feb 10 '20 at 07:36
By the time your server backend code gets the image **it is already on the server**. The question you should answer, at least to yourself, is why you have the limitation in the first place. If the point is to limit the amount of data **sent** to your server, you should also check the limit client-side, and any compression to reduce that amount needs to be done client-side before sending. If the point is to reduce amount of data *stored*, then you can do it server-side. — Lasse V. Karlsen, Feb 10 '20 at 09:00
When you receive it in `IFromFile` you have already received it on server. Do you want the compression get done on client? Or on server before you save it on the permanent storage? It's not quite clear what your requirement is. DO you mind to clarify? — Reza Aghaei, Feb 10 '20 at 10:03
Yess, I received on the server, I would prefer make sure than make compression on the server because on the client can be disabled this functionality, and my main problem now its on the storage, but can be helpfull make a double validation or something, — sgrysoft, Feb 10 '20 at 19:06
What is the problem? Server storage? Network bandwidth? RAM usage? Depending on what you need different compression techniques can be used. — Stefano Balzarotti, Feb 11 '20 at 14:52

score 6 · Answer 1 · answered Feb 11 '20 at 14:40

For my projects I usually use this library on backend: ImageResizer Here from Nuget: nuget ImageResizer

It's useful for compression and resizing server-side

Instead I use this in JS on frontend: PlUpload

In this example you can resize the image on the client Image-Resizing-on-Client-Side or you can use Chunking to speed up the upload to the client and manage the file on the server.

score 2 · Answer 2 · answered Feb 13 '20 at 14:56

You can use ImageSharp to resize your image. We used it to make a Thumb image of an uploaded IFormFile. First you open a read stream and then open an ImageSharp image for that stream.

using (var stream = file.OpenReadStream())
using (var image = Image.Load(stream))
{
   await ResizeAndUploadImageAsync(image, maxWidth, fileName);
}

After that you use a MemoryStream to save the resized image as a PNG and in our case upload the file to a S3 bucket.

private async Task ResizeAndUploadImageAsync(Image<Rgba32> image, int maxWidth, string 
    fileName)
    {    
        using (var writeStream = new MemoryStream())
        {
            if (image.Width > maxWidth)
            {
                var thumbScaleFactor = maxWidth / image.Width;
                image.Mutate(i => i.Resize(maxWidth, image.Height * 
                    thumbScaleFactor));
            }

            image.SaveAsPng(writeStream);
            await storageService.UploadFileAsync(writeStream, fileName);
    }
}

this is not working for me, Image.Load throws synchronous read is not supported exception — Maks, Feb 06 '21 at 17:36

score 1 · Answer 3 · answered Feb 10 '20 at 08:56

1

I think what your watching for is an JS Library that can Compress images like Compressor JS maybe this one can help you with your problem

answered Feb 10 '20 at 08:56

Fabian Kamp

89
7

score 0 · Answer 4 · answered Feb 11 '20 at 14:48

You cannot meaningfully compress images, especially not JPEG images. At least not in a reversible way. If the pictures coming from your phone's camera are 9-15 MB, then you need to lower the resolution, the quality or both.

You can do so in your client, using JavaScript, where you can resize the image and decrease the quality, and upload that modified image. This has the benefit that it also saves bandwidth (the smaller image is uploaded), but the drawback is that it can be circumvented by the user if they want to.

Or you can do the modifications serverside, where there exist plenty of managed libraries to do so.

How to compress an image from IFormFile before upload to the server ASP.Net Core

4 Answers4