locked
Compress image in size before uploading it. RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    In my application, the user takes a pic from the mobile and upload it.

    It works fine, but whenever the user experiences the network down or low network it doesn't upload the picture.

    So I want that whenever the user uploads a picture it should compress the image at the minimum size before uploading it.

    I mean I want to compress in size not dimensions.

    Please suggest. 

    Monday, May 11, 2020 5:23 PM

Answers

  • User1535942433 posted

    Hi demoninside9,

    Accroding to your description,as far as I think,you could use System.Drawing and System.Drawing.Imaging .You could use Bitmap and Graphics  to resize images.

    More details,you could refer to below codes:

        if (FileUpload1.PostedFile != null)  
        {  
            // Check the extension of image  
            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;  
                }  
            }

    More details,you could refer to below articles:

    https://docs.microsoft.com/en-us/dotnet/api/system.drawing.graphics?view=dotnet-plat-ext-3.1

    https://stackoverflow.com/questions/1922040/how-to-resize-an-image-c-sharp/24199315#24199315

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 7:33 AM

All replies

  • User-943250815 posted

    Did you try some Javascript library to make file files at client side?
    In this article there are links for 2 different libraries
    https://davidwalsh.name/javascript-zip

    Monday, May 11, 2020 9:04 PM
  • User1052662409 posted

    Did you try some Javascript library to make file files at client side?
    In this article there are links for 2 different libraries
    https://davidwalsh.name/javascript-zip

    I don't want to make a zip, I just want to reduce the size of the image.

    Tuesday, May 12, 2020 6:44 AM
  • User1535942433 posted

    Hi demoninside9,

    Accroding to your description,as far as I think,you could use System.Drawing and System.Drawing.Imaging .You could use Bitmap and Graphics  to resize images.

    More details,you could refer to below codes:

        if (FileUpload1.PostedFile != null)  
        {  
            // Check the extension of image  
            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;  
                }  
            }

    More details,you could refer to below articles:

    https://docs.microsoft.com/en-us/dotnet/api/system.drawing.graphics?view=dotnet-plat-ext-3.1

    https://stackoverflow.com/questions/1922040/how-to-resize-an-image-c-sharp/24199315#24199315

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 12, 2020 7:33 AM
  • User753101303 posted

    Hi,

    Make sure about the problem maybe by cjhecking first already uploaded images. I expect a jpg file which uses already some compression scheme. IMO the problem is likely that the picture is taken using the highest possible quality even if it is not usefull.

    If confirmed I would perhaps try to detect this using https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript and warn the user. Then the next step would be to really resize the image before the upload.

    If you don't want to zip or resize the image I'm not sure what's left.

    Tuesday, May 12, 2020 7:38 AM
  • User1052662409 posted

    If you don't want to zip or resize the image I'm not sure what's left.

    Make sure about the problem may be by checking first already uploaded images.

    I want to resize but not want to zip the images. After uploading the images I want to show those images on the webpage as <img...>

    i.e. if my image size is 1MB I want to make a minimum size as possible in KBs. If the quality of the image goes down a little bit, its okay, not an issue.

    Tuesday, May 12, 2020 8:19 AM
  • User753101303 posted

    Then you can resize the image to the targeted size on the client side using : https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ that pretty goes through the whole process from start to finish.

    You can't reallly target a given size in bytes. The first step is rather to make sure the pixel size is not too far from what you actually need. There is no need to updload a 4160 x 3120 picture and count beard hairs if you just want to show thumbnail images in a company directory or whatever...

    Tuesday, May 12, 2020 11:46 AM
  • User-943250815 posted

    If zip or resize is not an option, an alternative if acceptable would be reduce bit depth of image.
    Take look in "Calculate Four Sizes of an Image" at https://www.scantips.com/basics1d.html

    Tuesday, May 12, 2020 2:27 PM