www.webdeveloper.com
Results 1 to 5 of 5

Thread: Simple Image Zoom In/Out

  1. #1
    Join Date
    Jan 2012
    Posts
    3

    Simple Image Zoom In/Out

    I have an image with a set "canvas" size of 400x400. I want to zoom in and out on this image with a slider or zoom in/out buttons but keep the canvas dimensions. I've found many examples, but they resize the image (eg 500x500) or have a hover box, etc... etc... I need to keep that 400x400 and "magnify" it. Zooming in on the center is fine, just can't figure out how to pull it off.

    Thanks in advance for any thoughts or examples.

  2. #2
    Join Date
    Jan 2012
    Posts
    3
    Anyone?

  3. #3
    Join Date
    Nov 2010
    Posts
    1,040
    here's something. If you want the zooms to be more dramatic you can play around with the 0.9 and 1.1

    Code:
    <html>
    <head>
    <style>
    #thediv {
        margin:0 auto;
    	height:400px;
    	width:400px;
    	overflow:hidden;
    	}
    
    img {
        position: relative;
        left: 50%;
        top: 50%;
    }
    
    </style>
    </head>
    <body>
    <input type="button" value ="-" onclick="zoom(0.9)"/>
    <input type="button" value ="+" onclick="zoom(1.1)"/>
    <div id="thediv">
    
    <img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/>
    </div>
    <script>
    window.onload = function(){zoom(1)}
    
    
    function zoom(zm) {
    img=document.getElementById("pic")
    wid=img.width
    ht=img.height
    img.style.width=(wid*zm)+"px"
    img.style.height=(ht*zm)+"px"
        img.style.marginLeft = -(img.width/2) + "px";
        img.style.marginTop = -(img.height/2) + "px";
    }
    
    </script>
    </body>
    </html>

  4. #4
    Join Date
    Jan 2012
    Posts
    3
    Awesome - this might work perfect! Thanks

  5. #5
    Join Date
    Jun 2013
    Posts
    37
    Check following image resizing API of a professional image processing library.

    Code:
     REImage reImage = REFile.OpenImageFile(fileName);
    
                ImageProcessing.ApplyResize(reImage, 500, 500);
    
                REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles