无法通过javascript更改图像的宽度+高度答案

【问题标题】：cannot change width+height of image by javascript无法通过javascript更改图像的宽度+高度
【发布时间】：2013-06-03 21:50:32
【问题描述】：

我动态上传我的图片。我的代码也应该在 IE9 上运行，在下面的代码中，我只关注 IE9：

    <!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>

为什么我必须在行前声明宽度+高度： document.getElementById("id_image").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value ?
我不能放线（用星号标记：**有问题的线），因为它不会改变宽度+高度。

我怎样才能改变宽度+高度？

谢谢:)

【问题讨论】：

请在jsfiddle上粘贴一段运行代码
我没明白你的意思？我的代码只是一个示例代码，我无法正确编写它。这就是我问这个论坛的原因。我需要在javascript代码之后更改宽度+高度，但我不知道我应该写什么。
调试并查看有什么问题我本来希望看到一个正在运行的版本，现在只要看看它可能就是这条线” if (navigator.appName === "Microsoft Internet Explorer") 返回一个函数但不执行它看起来很有趣
设置css有用吗？ $("#id_image").css({width:320,height:350});
$("#id_image").css 做同样的事情......对不起。我也没有复制代码。我已将 :sizingMethod=scale 更改为 sizingMethod=image。我不想拉伸图像。实际上，我所做的是将其放入框架中：300x300。我看到最大尺寸（宽度或高度）是多少，并分别计算比率 300/宽度或 300/高度。宽度和高度都乘以相同的比例，所以其中一个是 300，一个是更少。为此，我首先需要“知道”原始图像的大小。通常，我通过设置 width="auto" 和 height= 来做到这一点

标签： javascript image internet-explorer-8 internet-explorer-9

【解决方案1】：

在改变图像大小直到它在屏幕上改变时会有延迟。

您可以将此问题视为已关闭。

【讨论】：