Question

我需要调整多张图片的大小。

这是HTML：

<img id="thumbnailId" src='http://thumbs1.ebaystatic.com/m/mPlrV_wS_b1vK9avUQ22r9w/140.jpg' class="img-responsive galleryproductimg" style="border: 0px solid blue; margin-top:10px;" />
<img id="thumbnailId" src='http://thumbs1.ebaystatic.com/m/mIeHLNVqUI1opFM0NmZvH_A/140.jpg' class="img-responsive galleryproductimg" style="border: 0px solid blue; margin-top:10px;" />

我的JavaScript代码：

   $(document).ready(function() {
      console.log("ready to go");   
      var imgs = getElementsById("thumbnailId");
      for (var i = 0; i &lt; imgs.length; i++) {
         var img = imgs[i];
         img.onload = function () {
         console.log("image is loaded");
      }
      resizeImage(img);
   }    
});

从中调用的函数：

function getElementsById(elementID) {       
    var elementCollection = new Array();
    var allElements = document.getElementsByTagName("*");

    for(i = 0; i &lt; allElements.length; i++) {
        if(allElements[i].id == elementID)
            elementCollection.push(allElements[i]);

    }
    return elementCollection;
}

和

function resizeImage(img) {
        console.log("width, height, src " + img.width + ", " + img.height + ", " + img.src);
        console.log("loaded? " + img.complete);

        var width = img.width;
        var height = img.height;    
        var constant = 100;
        var ratio = width / height;
        console.log("ratio " + ratio);

        if(width > constant || height > constant) {
            var newWidth = constant;
            var newHeight = constant*ratio;

            if(width &gt; height) {
                newWidth = constant;
                newHeight = constant*ratio;
            } else {
                newWidth = constant*ratio;
                newHeight = constant;           
            }

            console.log("newWidth, newHeight " + newWidth + ", " + newHeight);
            //img.width = newWidth;
            //img.height = newHeight;
            img.style.width = newWidth + "px;";
            img.style.height = newHeight +  + "px;";

            console.log("img from url AFTER " + img.width + ", " + img.height);   
        }
        console.log("==========================");
 }

代码似乎正确，适用于一个图像。但不适用于多个图像。我得到的输出是：

ready to go
resizeImages called
width, height, src 84, 110, http://thumbs1.ebaystatic.com/m/mPlrV_wS_b1vK9avUQ22r9w/140.jpg
loaded? true
ratio 0.7636363636363637
newWidth, newHeight 76.36363636363637, 100
img from url AFTER 84, 110
==========================
width, height, src 86, 110, http://thumbs1.ebaystatic.com/m/mIeHLNVqUI1opFM0NmZvH_A/140.jpg
loaded? true
ratio 0.7818181818181819
newWidth, newHeight 78.18181818181819, 100
img from url AFTER 86, 110
==========================
2 image is loaded

所以基本上我甚至没有在开始时获得正确的图像尺寸。由于某种原因，宽度总是110.任何想法在这里发生了什么？

Answer 1

HTML元素ID必须是唯一的使用相同的ID

不能有多个元素

Answer 2

使用HTML元素类而不是ID。使用document.getElementsByClassName过滤这些元素。

Answer 3

首先在html个ID中，不能在整个html页面中重复..第二件事......你没有调用image resize function，因为它是function's ..超出范围

   $(document).ready(function() {
      console.log("ready to go");   
      var imgs = getElementsById("thumbnailId");
      for (var i = 0; i &lt; imgs.length; i++) {
         var img = imgs[i];
         img.onload = function () {
         console.log("image is loaded");
         //call should be here
         resizeImage(img);
      }
      //resizeImage(img);
   }

}）;

使用javascript调整多个图像的大小

3 个答案: