Thursday, June 4, 2009

How to get Height and Widht of an Image using JavaScript

I got one problem during my project development. When I click on thumbnails to show image in pop up window, it does not appear in first click but on the second click it works. It only does work when the image exist is browser cache. And we had to show image on sigle click as per the client requirement. I got the solution and want to share with all of you. :)
Second requirement is that if image aspect ration is greater than 500 then reduce to 500.

<script type="text/javascript" language="javascript1.2">

var imgHeight;
var imgWidth;

function findHHandWW() {
imgHeight = this.width;imgWidth = this.width;return true;
}

function showImage(imgPath) {
var myImage = new Image();
myImage.name = imgPath;
myImage.onload = findHHandWW;
myImage.src = imgPath;
}
</script>


This is main code to get height and width of an image using javascript.

Now, I am giving complete code to how you will show pop up window after click on thumbnail image.

1. ThumbsNail.jsp

<html><head><title>Binod Java Solution</title></head>
<script type="text/javascript" language="javascript1.2">
var imgHeight;
var imgWidth;
var winHeight;
var winWidth;

function findHHandWW() {
imgHeight = this.width; imgWidth = this.width; return true;
}

function openWin(imgPath) {
var myImage = new Image();
myImage.name = imgPath;
myImage.onload = findHHandWW;
myImage.src = imgPath;
if(imgHeight>=500){imgHeight=500;}if(imgWidth>=500){imgWidth=500;}
winHeight = imgHeight + 60;winWidth = imgWidth + 30;

var url1="Image.jsp?myPath="+imgPath+"&hh="+imgHeight+"&ww="+imgWidth;
window.open(url1,"","width="+winWidth+",height="+winHeight+",status=yes,toolbar=no,
scrollbars=no,left=100,top=100");
}

</script>

<body>
<img src="c:\\Binod.JPG" height="85" width="85" onclick="openWin('c:\\Binod.JPG')" />
</body>
</html>

2. Image.jsp

<html><head><title>Binod Java Solution</title></head>

<script type="text/javascript">
function closeWin(){ window.close(); }
</script><body>

<%
String imagePath = request.getParameter("myPath");
String hh = request.getParameter("hh");
String ww = request.getParameter("ww");
%>

<img src="<%=imagePath%>" height="<%=hh%>" width="<%=ww%>" />
<center><input type="button" value="Close" onclick="closeWin()" /> </center>
</body>
</html>

14 comments:

  1. Great coding, Sir!

    ReplyDelete
  2. sometime this code doesnot work but any how good code to get image info without loading image in browser cache.

    ReplyDelete
  3. This prakash here from visakhapatnam ur solutions are excellent man

    ReplyDelete
  4. Hi Prakash, Thanks for your appreciation and hope you will keep watch on my blog and time to time give suggestion to enhance this blog.

    Thanks,

    Binod Suman
    http://binodsuman.blogspot.com

    ReplyDelete
  5. Hi Man really excellent job. Code is very useful. We can find the image height and widht using load the image in browser cache. Really great job. Keep it up. I am regulare visitor of your blog. Mike :)

    ReplyDelete
  6. Good solution thank you

    ReplyDelete
  7. Awesome solution Binod, works perfectly! This was a lifesaver, thanks so much.

    ReplyDelete
  8. Awesome solution Binod, works perfectly! This was a lifesaver, thanks so much.

    ReplyDelete
  9. Good solution thank you

    ReplyDelete
  10. this web-site so help ful for any modification coding any doubts send me
    anil4ong@gmail.com

    ReplyDelete
  11. Thankfulness to my father who shared with me on the topic of this blog, this
    web site is genuinely awesome.

    Feel free to visit my website: Green coffee info

    ReplyDelete
  12. I am trying to add image using asp.net upload control. Now before upload I want to make javascript validation of image size. i tried above solution but it did not worked. Also width and height are coming 0.

    ReplyDelete
  13. You've got a typo in your title :P

    ReplyDelete

You can put your comments here (Either feedback or your Question related to blog)