如何在上传到服务器 ASP.Net Core 之前从 IFormFile 压缩图像

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>

Answer 1

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.

Answer 2

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

Answer 3

我认为您关注的是一个 JS 库，它可以像Compressor JS一样压缩图像，也许这个库可以帮助您解决问题

Answer 4

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.