调整大小后获取图像大小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

回答

相关问题