Image size in Javascript - IE9

Question

I am trying to get the size of my image in IE9. I did it with success (tried on jpg). When I try loading an image whose width is lower than the height, there is no problem at all. But when I try to upload an image with a width higher than the height, I see that the lines that output "vh:", "vw:" return zero.

Why is there a problem when trying to load an image (by my code) with width > height? Thanks.

Here is my code (Works for IE9 - That's what I want to check out).

<!doctype html>
<html>
  <head>
    <!-- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> -->
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:700' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <title>Image preview example</title>
    <script type="text/javascript">
      var loadImageFile = (function () {
        var v=new Image();
        if (navigator.appName === "Microsoft Internet Explorer") {
          return function () {
            alert("file." + document.getElementById("id_filepic").value);
            $("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)");
            //$("#id_image").attr("src", document.getElementById("id_filepic").value);
            //v.src = document.getElementById("id_filepic").value;
            v.src = $("#id_filepic").val();
            alert("vw:" + v.width);
            alert("vh:" + v.height);
            $("#id_image").width(v.width);
            $("#id_image").height(v.height);
            document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("id_filepic").value;
            alert("w final:" + $("#id_image").width());
            alert("h final:" + $("#id_image").height());
          }
        }
      })();
    </script>
    <style type="text/css"></style>
  </head>
  <body>
    <form name="uploadForm">
      <p><input id="id_filepic" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
    </form>
    <image id="id_image" src="" onmousedown="return false"></image>
  </body>

You can consider this issue as closed, since I have solution on: http://stackoverflow.com/questions/17012263/the-event-after-loading-image-on-ie9 Thanks, anyway :) — Eitan, Jun 14 '13 at 17:16

score 0 · Accepted Answer · edited May 23 '17 at 11:56

0

Consider this issue as closed, since I found solution on: The event after loading image on IE9

Thanks, anyway :)

edited May 23 '17 at 11:56

Community

1
1

answered Jan 29 '14 at 12:15

Eitan

1,286
2
16
55

Image size in Javascript - IE9

1 Answers1