Question

我有JS调整Image的width和height的大小，如果在将实际图像src分配给图像对象之前使用Alert，并且如果我省略了alertbox，那么它工作正常工作。请建议我如何解决它。

`

<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

在图像上设置.src时，必须等到图像成功加载，直到您可以读取它的高度和宽度。有一个onload事件处理程序，它会告诉你何时加载图像。

以下是代码中可能出现此问题的地方：

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

在这种情况下，由于图像已经在文档的其他位置，因此您应该只读取现有元素的高度和宽度，而不是新元素。

测试时要非常小心，因为如果图像在浏览器缓存中，它可能会立即加载，但当它不在缓存中时，加载需要一些时间，并且不会立即可用。

在脚本中的正确位置发出警报可以允许在脚本进行之前加载图像，这可以解释为什么它可以用于警报。

正如RobG所提到的，你的onload处理程序也有问题（需要是一个函数，而不是函数的返回结果）。

这是一个更简单的功能，可以缩放图像以适应边界。这使用了一个技巧，你只需要设置一个尺寸（图像的高度或宽度），另一个将由浏览器缩放以保持纵横比。

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";
        }
    }
}

您可以在此处看到它：http://jsfiddle.net/jfriend00/BeJg4/。

Answer 2

在分配给onload的函数中：

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

您正在分配调用resize_image_height_weight的结果，这会在IE中引发错误。将其设置为函数：

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

Javascript调整大小图像不起作用

2 个答案: