question

JayPaterson-1460 avatar image
0 Votes"
JayPaterson-1460 asked AlbertKallal-4360 edited

Reduce file size client side before uploading to server

I created a web app for some of our staff who use this to fill out some details, select an image (either from the library on their device or direct from the camera) and then send it to the server. On occasion the staff report that they get a httpException Maximum length exceeded.
While I know of ways around this such as increasing the allowed size in the web.config I figured I would rather the uploaded file wasn't so big in the first place as there is no requirement for it to be so.
So the scenario would be that the staff member selects the photo (existing or from the camera) and a client side function would reduce the file size (bytes) and then uploads it.

I have been looking at this option
https://www.npmjs.com/package/browser-image-compression

But wondered if there was anything built in to .NET? The web app is currently .NET 4.7.2
If there is not then how would I adapt the example code to work on a .NET web form? The site talks about script frameworks such as angular.

dotnet-csharpdotnet-aspnet-webpages
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.


The search results for https://www.bing.com/search?q=javascript+reduce+image+size+before+upload show examples that are based on something like ‘canvas.getContext("2d")’ and ‘context.drawImage’, executed in JavaScript, for modern DHTML, without external libraries. Maybe you can adjus that samples and post the binary result or resizing instead of default upload data.

0 Votes 0 ·

Well, even zipping a picture in general does NOT help you
(pictures - at least most formats are already VERY much compressed).
So trying to zip or compress the picture not going to help in most cases.

Reducing the dimensions and size of the picture can help a lot, but not just trying to compress a existing picture.

I don't know if a client side JavaScript utility exists to re-size a picture, but then again, you would have to pick a size to re-size to?

But, as noted, pictures (most formats) are already high compressed. I suppose you could if picture is say larger then a give size then try to crunch and compress more. But then again, what levels of compression to use is on its own a complex issue to be resolved.

0 Votes 0 ·
YijingSun-MSFT avatar image
0 Votes"
YijingSun-MSFT answered cheong00 edited

Hi @JayPaterson-1460 ,
As far as I think,if you need to compress images,the image will be resize to smaller size or reduce the quality of the image.
1.You could use Bitmap and Graphics to resize images.Just like this:

     string extension = Path.GetExtension(FileUpload1.FileName);  
             if (extension.ToLower() == ".png" || extension.ToLower() == ".jpg")  
             {  
                 Stream strm=FileUpload1.PostedFile.InputStream;  
                 using (var image = System.Drawing.Image.FromStream(strm))  
                 {  
                     // Print Original Size of file (Height or Width)   
                     Label1.Text = image.Size.ToString();  
                     int newWidth = 240; // New Width of Image in Pixel  
                     int newHeight = 240; // New Height of Image in Pixel  
                     var thumbImg = new Bitmap(newWidth, newHeight);  
                     var thumbGraph = Graphics.FromImage(thumbImg);  
                     thumbGraph.CompositingQuality = CompositingQuality.HighQuality;  
                     thumbGraph.SmoothingMode = SmoothingMode.HighQuality;  
                     thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;  
                     var imgRectangle = new Rectangle(0, 0, newWidth, newHeight);  
                     thumbGraph.DrawImage(image, imgRectangle);  
                     // Save the file  
                     string targetPath = Server.MapPath(@"~\Images\") + FileUpload1.FileName;  
                     thumbImg.Save(targetPath, image.RawFormat);  
                     // Print new Size of file (height or Width)  
                     Label2.Text = thumbImg.Size.ToString();  
                     //Show Image  
                     Image1.ImageUrl = @"~\Images\" + FileUpload1.FileName;  
                 }  

2.Use a Web.config file to add compression to a website
More details,you could refer to below article:
https://livebook.manning.com/book/fast-asp-dot-net-websites/chapter-3/96


If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Yijing Sun

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 is not applicable because the server side must have received the image before you can use GDI+ to reduce the size of image.

2 is also not applicable because it's about compress payload "from server to client", not reverse.

Generally you can only use a client-side library to do this, and solution offered on server is too late for your purpose.

0 Votes 0 ·
shanksharma-8703 avatar image
0 Votes"
shanksharma-8703 answered shanksharma-8703 edited

I feel good if I compress my images using online image compresser


5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.