cannot change width+height of image by javascript

Question

I dynamically upload my picture. My code should run also for IE9, and on the following code, I focus on IE9 only:

    <!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 () {
        if (navigator.appName === "Microsoft Internet Explorer") {
            return function () {
                $("#id_image").width(300);
                $("#id_image").height(300);
                $("#id_image").css("filter", "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)");
                document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
$("#id_image").width(320); // ****** Problematic line
$('#id_image").height(350); // ****** Problematic line
            }
        }
    })();
    </script>
    <style type="text/css">
    </style>
    </head>

    <body>

    <form name="uploadForm">
    <p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
    </form>
    <img id="id_image" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" onmousedown="return false" alt="Your picture"/>
    </body>
    </html>

Why must I declare width+height before line: document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value ?
I cannot put line (marked on asterisk : ** Problematic line), because it doesn't change the width+height.

How can I change the width+height instead?

Thanks :)

I didn't understand what did you mean? My code, is only a sample code, which I have problem to write it properly. That's why I am asking this forum. I need to change width+height after the code of javascript, but I don't know what shall I write. — Eitan, Jun 03 '13 at 22:01
to debug and see whats wrong I would have liked to see a running version, now by just looking at it may be the line" if (navigator.appName === "Microsoft Internet Explorer") returning a function but not executing it looks funny — varun, Jun 03 '13 at 22:04
does setting the css work? `$("#id_image").css({width:320,height:350});` — Willem, Jun 03 '13 at 22:55
$("#id_image").css does the same thing ... Sorry. I didn't copy the code as well. I have changed :sizingMethod=scale to sizingMethod=image. I don't want to stretch the image. What I do, indeed, put it in frame: 300x300. I see what is the largest size (width or height), and calc the ratio 300/width or 300/height respectively. Both width and height are multiply by the same ratio, so one of them is 300, and one of them is less. To do this, I need to "know" first what is the size of the original image. I do this, generaly, by putting width="auto", and height= — Eitan, Jun 04 '13 at 04:14
Threat this issue closed, please. (I shall create new one, with quite different code). — Eitan, Jun 06 '13 at 04:12
Consider this issue as closes, since I mentioned a solution on: http://stackoverflow.com/questions/17012263/the-event-after-loading-image-on-ie9 — Eitan, Jun 14 '13 at 17:18

score 0 · Accepted Answer · answered Jan 29 '14 at 12:18

0

There is a delay when changing image size till it changes on screen.

You can consider this issue as closed.

answered Jan 29 '14 at 12:18

Eitan

1,286
2
16
55

score 0 · Answer 2 · answered Mar 30 '23 at 14:15

0

If you are trying to change attributes height and width of image, make sure that they are integers. If not use MAth.floor

answered Mar 30 '23 at 14:15

Santosh Kadam

1,265
14
14

cannot change width+height of image by javascript

2 Answers2