調整大小後獲取圖像大小JavaScript

我正嘗試調整基於最大寬度/最大高度數組的圖像大小。下面是我想出迄今：調整大小後獲取圖像大小JavaScript

<html> 
<head> 
    <title>Image resize test</title> 
    <script> 
     function createImage(){ 
      //The max-width/max-height 
      var maxDim = [500,500]; 
      //Create the image 
      var img = document.createElement("img"); 
      img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png"); 
      document.body.appendChild(img); 
      //Function for resizing an image 
      function resize(){ 
       //resize the image 
       var portrait = this.width < this.height; 
       this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0]; 
       //What is the height? PROBLEM HERE!!! 
       console.log(this.height); 
      } 
      //Is the image loaded already? 
      var temp = new Image(); 
      temp.src = img.src; 
      var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0; 
      //Fire the resize function 
      if (loaded) resize.call(img); 
      else img.addEventListener("load",resize,false); 
     } 
    </script> 
</head> 
<body onload="createImage()"> 
</body> 
</html>

您應該能夠運行這個文件原樣。它可以在加載圖像後獲得寬度/高度。但是一旦你改變了寬度，它仍然記錄舊的高度。唯一正常工作的瀏覽器似乎是Firefox（新版本）。所有其他瀏覽器在窗口完成加載之前不更新高度屬性。

有沒有人知道這個問題的解決辦法？該圖像已經加載，但它沒有給出正確調整大小的尺寸。

來源

2011-10-07 Azmisov

在Chrome上正常工作14.0.835.187m – lostyzd

我使用的是Chrome 13，它在第一次加載頁面時起作用。但是，刷新時，它會給出錯誤的高度。 – Azmisov

@Azmisov它是如何改變高度爲160的情況下，FF和鉻沒有看到任何東西寫在你的代碼... – Varun

您還沒有更改height，因爲您的圖片的高度>寬度，請將portrait = false;

當你改變寬度時，在IE8中，它只會調整寬度，但在Chrome中它會改變寬度和高度，我認爲這是瀏覽器的依賴。

您可以通過更改高度和手動修復此問題。

來源

2011-10-07 03:51:33 lostyzd

我曾想過離開高度屬性會讓圖像按比例調整大小。你知道設置最大寬度/最大高度樣式是否會在IE7 +中按比例調整圖像大小？對不起，我目前沒有在我的機器上安裝IE。 – Azmisov

@Azmisov我在IE8上測試，使用css樣式的最大寬度，它根本不起作用，即使當我用'width：auto; max-width：10px;'修復它時，' – lostyzd

好吧，這似乎是唯一的交叉瀏覽器的可能性。 – Azmisov

而不是設置寬度/高度，你可以嘗試設置image.style.maxWidth/image.style.maxHeight然後圖像將調整大小，保留寬高比。

來源

2011-10-07 04:07:57

你知道這是否適用於IE7，Safari 4，Chrome 12，FF 3.6和Opera 10.6？ – Azmisov

對於IE7最大寬度/最大高度CSS樣式不起作用。對於其他瀏覽器應該沒問題。如果IE <8支持很重要，那麼我推薦計算比率並相應地更新寬度和高度。 –

IE犯規認識addEvenetListener，你必須基於Brower ..可能的解決方案

<html> 
<head> 
    <title>Image resize test</title> 
    <script> 
     function createImage(){ 
      //The max-width/max-height 
      var maxDim = [500,500]; 
      //Create the image 
      var img = document.createElement("img"); 
      img.setAttribute("src","http://nyrixcorp.com/images/eggplant_service.png"); 
      document.body.appendChild(img); 
      //Function for resizing an image 
      function resize(){ 
       //resize the image 
       var portrait = this.width < this.height; 
       this[portrait ? "height" : "width"] = maxDim[portrait ? 1 : 0]; 
       //What is the height? PROBLEM HERE!!! 
       console.log(this.height); 
      } 
      //Is the image loaded already? 
      var temp = new Image(); 
      temp.src = img.src; 
      var loaded = typeof temp.complete != "undefined" ? temp.complete : !isNaN(temp.width+temp.height) && temp.width+temp.height != 0; 
      //Fire the resize function 
      if (loaded) resize.call(img); 
      else{ 
      if(isIE == true) // check here for browser 
      img.onload = resize; 
      else 
      img.addEventListener("load",resize,false);} 
     } 
    </script> 
</head> 
<body onload="createImage()"> 
</body> 
</html>

它會正常工作只不過是你需要根據你使用的瀏覽器上通過true或false到isIE處理它你的自我

來源

2011-10-07 04:51:53 Varun

更好的辦法：如果（img.addEventListener）{ ... }否則，如果（img.attachEvent）{ ... }其他{ img.onload = ... } –

嗯現在用它在..謝謝@AndreyM。 – Varun

調整大小後獲取圖像大小JavaScript

回答

相關問題