locked
Resizing Image RRS feed

  • Question

  • User-562051539 posted

    Image called bigimage is size 150x300

    Image called smallimage (I have a few of these smallimage1, smallimage2 etc)  is size 40x40

    After uploading a picture, the picture goes into smallimage and I resize the picture proportionally to fit into smallimage (with function called ResizePicture)

    I add onmouseover attribute to smallimage - the bigimage src is then the src of the small image. 

    How would I now resize bigimage, so that the proportions of the picture should be right?  It needs to be resized onmouseover of any of the smallimages?

    Monday, August 12, 2013 4:52 AM

Answers

  • User1508394307 posted

    To avoid any misunderstanding the code that you have is not for resizing the actual image (file)

    img.Width = imgWidth
    img.Height = imgHeight
    img.ImageUrl = picturepath

    but to resize the img tag.

    That means that you always load the same image file but resize its container. If image is always the same and it is already shown on screen then it might be too expensive to call server to resize the container on mouse over. Instead you can do the same using javascript, e.g.

      if (obj.width > obj.height) {
        b.style.width = maxX+"px";
        b.style.height = "auto";
      } else  
      {
        b.style.height = maxY+"px";
        b.style.width = "auto";
      }

    Full example at http://jsbin.com/osijoz/8/edit

    If you cannot use it, and you still want to have resize by the code you can locate your image in UpdatePanel and call only partial postback. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 16, 2013 6:40 AM

All replies

  • User1508394307 posted

    After uploading a picture you either need to save both bigimage and smallimage or at least bigimage. When you save only smallimage 40x40 you could not resize it to 150x300 without losing quality of the picture. As you have different ratio 1:2 (150x300) and 1:1 (40x40) you would need to cut the middle or a corner of the bigger image.  

    Monday, August 12, 2013 5:21 AM
  • User-562051539 posted
    
    

    I do not resize the actual picture, I save it in its original size, but I resize the picture before showing it.

    Dim currentImage As System.Drawing.Image = System.Drawing.Image.FromFile(Server.MapPath(picturepath))
    
            imgHeight = currentImage.Height
            imgWidth = currentImage.Width
    
            Do While imgWidth > maxWidth Or imgHeight > maxHeight
                'Determine what dimension is off by more
                Dim deltaWidth As Integer = imgWidth - maxWidth
                Dim deltaHeight As Integer = imgHeight - maxHeight
                Dim scaleFactor As Double
    
                If deltaHeight > deltaWidth Then
                    'Scale by the height
                    scaleFactor = maxHeight / imgHeight
                Else
                    'Scale by the Width
                    scaleFactor = maxWidth / imgWidth
                End If
    
                imgWidth *= scaleFactor
                imgHeight *= scaleFactor
            Loop
    
            img.Width = imgWidth
            img.Height = imgHeight
            img.ImageUrl = picturepath


    Monday, August 12, 2013 5:35 AM
  • User-417640953 posted

    Hello pulsmartin,

     

    According to your description and code you provided, I understand that you upload picture files and save them

    With their own size. You show the picture in an image control called smallimage which has a size 40*40 .

    When  smallimage triggers Event onmouseover and the bigimage which has a size 150*300 will show the picture.

    For the issue, we should define a method to resize the image.

    Private Sub ResizePicture(Img As Image, maxWidth As Double, maxHeight As Double, picPath As String)
            Dim currentImage As System.Drawing.Image = System.Drawing.Image.FromFile(Server.MapPath(picPath))
            Dim imgHeight As Double = currentImage.Height
            Dim imgWidth As Double = currentImage.Width
            Response.Write(imgHeight & ":" & imgWidth & "<br/>")
            While imgWidth > maxWidth Or imgHeight > maxHeight
                     'Determine what dimension is off by more
                     Dim deltaWidth As Double = imgWidth - maxWidth
                     Dim deltaHeight As Double = imgHeight - maxHeight
                     Dim scaleFactor As Double = 0
    
                     If deltaHeight > deltaWidth Then
                              'Scale by the height
                              scaleFactor = CDbl(maxHeight) / imgHeight
                     Else
                              'Scale by the Width
                              scaleFactor = CDbl(maxWidth) / imgWidth
                     End If
                     Response.Write(scaleFactor & "<br/>")
    
                     imgWidth *= CDbl(scaleFactor)
                     imgHeight *= CDbl(scaleFactor)
                     Response.Write(imgHeight & ":" & imgWidth & "<br/>")
            End While
    
            Img.Width = CInt(Math.Truncate(imgWidth))
            Img.Height = CInt(Math.Truncate(imgHeight))
            Img.ImageUrl = Server.MapPath(picPath)
    
    End Sub
    

    When show picture we call  ResizePicture(smallimage, 40, 40, picPath);

    When show picture we call  ResizePicture(bigimage, 150, 300, picPath);

     

    Hope it helps, if I misunderstand your issue, please let me know.

     

     

    Best Regards!

    Tuesday, August 13, 2013 5:50 AM
  • User-562051539 posted

    Fuxiang Zhang, that is the code that I have.

    On mouseover, doesn't do a postback (and I don't want it to do a postback)

    So my question really is:  How would I change the image size of bigpicture without a postback (same way I change the src without postback)

    imgSmall.Attributes.Add("onmouseover", ImageBig.ClientID & ".src=this.src;")



    Friday, August 16, 2013 4:29 AM
  • User1508394307 posted

    To avoid any misunderstanding the code that you have is not for resizing the actual image (file)

    img.Width = imgWidth
    img.Height = imgHeight
    img.ImageUrl = picturepath

    but to resize the img tag.

    That means that you always load the same image file but resize its container. If image is always the same and it is already shown on screen then it might be too expensive to call server to resize the container on mouse over. Instead you can do the same using javascript, e.g.

      if (obj.width > obj.height) {
        b.style.width = maxX+"px";
        b.style.height = "auto";
      } else  
      {
        b.style.height = maxY+"px";
        b.style.width = "auto";
      }

    Full example at http://jsbin.com/osijoz/8/edit

    If you cannot use it, and you still want to have resize by the code you can locate your image in UpdatePanel and call only partial postback. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 16, 2013 6:40 AM
  • User-562051539 posted

    Thank you, that's what I was looking for.  (My English might not be so good, maybe that's why my question wasn't clear)

    Friday, August 16, 2013 8:02 AM