Javascript 調整圖像大小不起作用

Question

我有 JS 可以調整 Image 的width和height ，如果我在將實際圖像 src 分配給圖像 object 之前使用 Alert 並且如果我省略了警報框，它就可以正常工作。 請建議我如何解決它。

`

<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，而不是函數的返回結果）。

這是一個更簡單的 function 來縮放圖像以適應邊界。 這使用了一個技巧，您只需要設置一個大小（圖像上的高度或寬度），另一個將由瀏覽器縮放以保持縱橫比。

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 的 function 中：

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

您正在分配調用resize_image_height_weight的結果，這會在 IE 中引發錯誤。 將其設置為 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