Javascript 调整图像大小不起作用

Question

I have JS which resize the width and height of Image which is working fine if I used Alert before assigning the actual image src to the image object and if I omit the alertbox, it is not working.我有 JS 可以调整 Image 的width和height ，如果我在将实际图像 src 分配给图像 object 之前使用 Alert 并且如果我省略了警报框，它就可以正常工作。 Please suggest me how to fix it.请建议我如何解决它。

` `

<html>
        <head>
        <script type="text/javascript" language="javascript">
        function resize_image_height_weight(id, hgt, wdth)
        {
            //alert(id);
            Obj=document.getElementById(id);
            myImage = new Image();
            myImage.src = Obj.src;
            var heights = myImage.height;
            var widths  = myImage.width;
        //  alert("Height=>" + heights + " Width=> " + widths);

            if(heights > hgt || widths > wdth)
            {
                if(heights > widths)
                {
                    var temp = heights/hgt;
                    var new_width = widths / temp;
                    new_width = parseInt(new_width);
                    heights = hgt;
                    widths = new_width;
                }
                else
                {
                    var temp = widths/wdth;
                    var new_height = heights / temp;
                    new_height = parseInt(new_height);
                    heights = new_height;
                    widths = wdth;
                }
            }
            Obj.height = heights;
            Obj.width = widths;

        }
        </script>
        </head>
        <body>
            <div>
            <center>
            <img src="http://www.google.co.in/intl/en_com/images/srpr/logo1w.png" id="i" alt="Google logo" height="150" width="150">
            <script type="text/javascript">
                document.images[document.images.length-1].onload = resize_image_height_weight("i",150,150);
            </script>
            </center>
            </div>
        </body>
        </html>`

Answer 1

When you set the.src on an image, you have to wait until the image is successfully loaded until you can read it's height and width.在图像上设置.src 时，必须等到图像加载成功，才能读取它的高度和宽度。 There is an onload event handler that will tell you when the image is loaded.有一个 onload 事件处理程序会告诉您何时加载图像。

Here's a place in your code where this issue could occur:这是您的代码中可能发生此问题的地方：

        Obj=document.getElementById(id);
        myImage = new Image();
        myImage.src = Obj.src;
        var heights = myImage.height;
        var widths  = myImage.width;

In this case, since the image was already elsewhere in the document, you should just read the height and width off the existing element rather than the new element.在这种情况下，由于图像已经在文档中的其他位置，您应该只读取现有元素而不是新元素的高度和宽度。

Be very careful when testing because if the image is in your browser cache, it may load immediately, but when it's not in your cache, it takes some time to load and won't be available immediately.测试时要非常小心，因为如果图像在您的浏览器缓存中，它可能会立即加载，但当它不在您的缓存中时，加载需要一些时间并且不会立即可用。

Putting an alert at the right place in your script can allow the image to load before the script proceeds which could explain why it works with the alert.在脚本中的正确位置放置警报可以允许图像在脚本继续执行之前加载，这可以解释为什么它与警报一起使用。

As RobG mentions, your onload handler is also faulty (needs to be a function, not the returned result of a function).正如 RobG 所提到的，您的 onload 处理程序也有问题（需要是 function，而不是函数的返回结果）。

Here's a simpler function to scale an image to fit the bounds.这是一个更简单的 function 来缩放图像以适应边界。 This uses a trick that you only need to set one size (height or width on the image) and the other will be scaled by the browser to preserve the aspect ratio.这使用了一个技巧，您只需要设置一个大小（图像上的高度或宽度），另一个将由浏览器缩放以保持纵横比。

function resizeImage(id, maxHeight, maxWidth) {
    // assumes the image is already loaded
    // assume no height and width is being forced on it yet
    var img = document.getElementById(id);
    var height = img.height || 0;
    var width = img.width || 0;
    if (height > maxHeight || width > maxWidth) {
        var aspect = height / width;
        var maxAspect = maxHeight / maxWidth;
        if (aspect > maxAspect) {
            img.style.height = maxHeight + "px";
        } else {
            img.style.width = maxWidth + "px";
        }
    }
}

You can see it in action here: http://jsfiddle.net/jfriend00/BeJg4/ .你可以在这里看到它的实际效果： http://jsfiddle.net/jfriend00/BeJg4/ 。

Answer 2

In the function assigned to onload:在分配给 onload 的 function 中：

> document.images[document.images.length-1].onload =
> resize_image_height_weight("i",150,150);

you are assigning the result of calling resize_image_height_weight which throws an error in IE.您正在分配调用resize_image_height_weight的结果，这会在 IE 中引发错误。 Set it to a function instead:将其设置为 function 代替：

document.images[document.images.length-1].onload = function() {
          resize_image_height_weight("i",150,150);
};

Javascript 调整图像大小不起作用

问题描述

2 个解决方案

解决方案1
1 2011-07-20 05:20:52

解决方案2
0 已采纳 2011-07-20 05:32:23

Javascript 调整图像大小不起作用

问题描述

2 个解决方案

解决方案1 1 2011-07-20 05:20:52

解决方案2 0 已采纳 2011-07-20 05:32:23

解决方案1
1 2011-07-20 05:20:52

解决方案2
0 已采纳 2011-07-20 05:32:23