locked
Resizing an image RRS feed

  • Question

  • User-735851359 posted

    Hello,

    I make a web site where I display celp phones. Thumnails are displayed, adn when clicked, the original image is displayed.

    My problem is that when the user adds a picture, it can be a horizontal or vertical picture. But I want all pictures horizantal and use the following cose:

     // Save main product image
            var savePath = @"~\images\" + productId;
            productImage.Resize(1024 , 768 , preventEnlarge:  true);
            productImage.Save(filePath: savePath + ".jpg", imageFormat: "jpg", forceCorrectExtension: true );
            // Resize and save thumbnail
            productImage.Resize(width: 200, height: 150, preserveAspectRatio: false);
            productImage.Save(filePath: savePath + "_thumb.jpg", imageFormat: "jpg", forceCorrectExtension: true );

    In this situation, if the uploaded image is vertical, it thumnail will not be good. 

    How can I solve this problem?

    thanx in advance

    Friday, April 25, 2014 4:04 AM

Answers

  • User281315223 posted

    By default you aren't going to be able to adjust the actual dimensions of the file that is being uploaded out of the box. You'll likely need to read the contents of the file in and then after ensuring that it is a valid image file, consider using a third-party library to handle manipulating the image itself (and then saving it as you desire).

    I'll provide a few different options and considerations below.

    Recommendation : Consider ImageResizer.NET

    You may want to consider looking into a third-party library to handle your image manipulation operations instead of possibly writing your own code (simply because a third-party is likely to be a bit more optimized and well tested). The most popular choice available would be ImageResizer, which would just require a simple reference within your application.

    It's a proven and tested library specifically geared for resizing images and it will likely result in much better quality images than using .NET's built-in methods.

    Tutorials and Alternative Options

    There are a few methods and tutorials available for handling this same functionality (basically after a file is uploaded you apply the specific logic to transform it as you desire). I would recommend checking out the following tutorials for a bit more information and examples of implementing it within your application : 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 25, 2014 8:16 AM
  • User-1454326058 posted

    Hi ayanmesut,

    As we know, the picture will be distortion if we resize a Bitmap.

    So for your requirement, I suggest that you could add the tips to remind the user to upload the required images.

    You also could let the users to crop the image after they select an image, after that they could click submit to upload it.

    There is a link that may benefit you:

    # jQuery Image Crop

    http://www.jqueryrain.com/2013/08/jquery-image-crop/

    Thanks

    Best Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 28, 2014 3:22 AM

All replies

  • User-933257319 posted

    you can get the height and width of the orignal image, from this you will know if the image is vertical or horizontal...
    once you know its vertical or horizontal you can define two sizes and create the thumbnail.

     

     

    Friday, April 25, 2014 4:27 AM
  • User-1416423428 posted

    You can get the uploaded photo's width and height (+ other stuff)

    if (IsPost) {
        // user submitted form
        photo = WebImage.GetImageFromRequest();   // get image file from request form
        
        // check if valid image
        if (photo != null){
          Response.Write("<b>Uploaded file was: </b>" + photo.FileName);
          Response.Write("<br>format: " + photo.ImageFormat);
          Response.Write("<br>hashcode: " + photo.GetHashCode());
          Response.Write("<br>height: " + photo.Height);
          Response.Write("<br>Width: " + photo.Width);
    
          // etc....

    Friday, April 25, 2014 7:59 AM
  • User281315223 posted

    By default you aren't going to be able to adjust the actual dimensions of the file that is being uploaded out of the box. You'll likely need to read the contents of the file in and then after ensuring that it is a valid image file, consider using a third-party library to handle manipulating the image itself (and then saving it as you desire).

    I'll provide a few different options and considerations below.

    Recommendation : Consider ImageResizer.NET

    You may want to consider looking into a third-party library to handle your image manipulation operations instead of possibly writing your own code (simply because a third-party is likely to be a bit more optimized and well tested). The most popular choice available would be ImageResizer, which would just require a simple reference within your application.

    It's a proven and tested library specifically geared for resizing images and it will likely result in much better quality images than using .NET's built-in methods.

    Tutorials and Alternative Options

    There are a few methods and tutorials available for handling this same functionality (basically after a file is uploaded you apply the specific logic to transform it as you desire). I would recommend checking out the following tutorials for a bit more information and examples of implementing it within your application : 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 25, 2014 8:16 AM
  • User-735851359 posted

    How can I use ImageResizer in a Web Pages web site?

    I make a web site where I display celp phones. Thumnails are displayed, adn when clicked, the original image is displayed.

    My problem is that when the user adds a picture, it can be a horizontal or vertical picture. But I want all pictures horizantal.

    Sunday, April 27, 2014 5:25 AM
  • User-1454326058 posted

    Hi ayanmesut,

    As we know, the picture will be distortion if we resize a Bitmap.

    So for your requirement, I suggest that you could add the tips to remind the user to upload the required images.

    You also could let the users to crop the image after they select an image, after that they could click submit to upload it.

    There is a link that may benefit you:

    # jQuery Image Crop

    http://www.jqueryrain.com/2013/08/jquery-image-crop/

    Thanks

    Best Regards

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 28, 2014 3:22 AM
  • User127268898 posted

    Dear Ayanmesut 

    The Below code work fine for me. 

    For asp.net with C# user can use this code for Re-size image with Transparancy....

    public static void SaveImage(int imgheight, int imgwidth, string imgfilename, string path, FileUpload upImage)
    {
    int width = imgwidth;
    int height = imgheight;
    string fileName = imgfilename;
    float redPercentage = 100;

    try
    {
    var bmpOrg = new Bitmap(upImage.PostedFile.InputStream);
    float wPercentage = (Convert.ToSingle(width) * 100) / Convert.ToSingle(bmpOrg.Width);
    float hPercentage = (Convert.ToSingle(height) * 100) / Convert.ToSingle(bmpOrg.Height);
    redPercentage = (wPercentage < hPercentage) ? wPercentage : hPercentage;
    redPercentage = (redPercentage > 100) ? 100 : redPercentage;
    bmpOrg.MakeTransparent();
    //to save image with new height and width without frame
    var imgBanner = ImageResize.ScaleByPercent(bmpOrg, redPercentage);
    //to save image with new height and width with frame specified
    //System.Drawing.Image imgBanner = ImageResize.ScaleByPercent(bmpOrg, redPercentage, width, height);
    System.Drawing.Bitmap bmpOrg1 = new System.Drawing.Bitmap(imgBanner);
    Graphics newGraphic = Graphics.FromImage(bmpOrg1);
    newGraphic.Clear(Color.Transparent);
    newGraphic.DrawImage(bmpOrg, 0, 0, bmpOrg1.Width, bmpOrg1.Height);
    bmpOrg1.MakeTransparent(bmpOrg1.GetPixel(0, 0));
    if (!Directory.Exists(path))
    {
    Directory.CreateDirectory(path);
    }
    bmpOrg1.Save(path + fileName);
    }
    catch (Exception ex)
    {
    throw ex;
    }
    }

     In above code we have one more function.... ImageResize.ScaleByPercent(bmpOrg, redPercentage, width, height);

    public static System.Drawing.Image ScaleByPercent(System.Drawing.Image imgPhoto, float Percent)
    {
    float nPercent = ((float)Percent / 100);
    int sourceWidth = imgPhoto.Width;
    int sourceHeight = imgPhoto.Height;
    int sourceX = 0;
    int sourceY = 0;
    int destX = 0;
    int destY = 0;
    int destWidth = (int)(sourceWidth * nPercent);
    int destHeight = (int)(sourceHeight * nPercent);
    Bitmap bmPhoto = new Bitmap(destWidth, destHeight, PixelFormat.Format24bppRgb);
    bmPhoto.SetResolution(imgPhoto.HorizontalResolution, imgPhoto.VerticalResolution);
    Graphics grPhoto = Graphics.FromImage(bmPhoto);
    grPhoto.InterpolationMode = InterpolationMode.HighQualityBicubic;
    grPhoto.Clear(Color.White);
    grPhoto.DrawImage(imgPhoto,
    new Rectangle(destX, destY, destWidth, destHeight),
    new Rectangle(sourceX, sourceY, sourceWidth, sourceHeight),
    GraphicsUnit.Pixel);
    grPhoto.Dispose();
    return bmPhoto;

    }

    Monday, April 28, 2014 3:59 AM
  • User-735851359 posted

    Thank you for every one who helped me find out.

    I've chosen the following:

    http://www.garralab.com/nailthumb.php.

    Tuesday, April 29, 2014 3:04 AM