调整动态图像的大小不可用一次以上

Question

I've got a little problem here. I've been trying to do an image gallery with JavaScript but there's something that I got a problem with. I can get the image to resize when the first image load, but as soon as I load another image, it won't resize anymore! Since the user will be able to upload a lot of different size pictures, I really need to make it work.

I've checked for ready-to-use image gallery and such and nothing was doing what I need to do.

Here's my javascript:

function changeCurrentImage(conteneur)  
{  
    var img = conteneur.getElementsByTagName("img");

    var imgUrl = img[0].src;

    var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
    var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
    var currentImg = document.getElementById('currentImage');
    currentImg.src = imgFirstPart + "borne" + imgLastPart;

    resize(document.getElementById('currentImage'), 375, 655);
}

function resize(img, maxh, maxw) {  
  var ratio = maxh/maxw;  
  if (img.height/img.width > ratio){  
     // height is the problem  
    if (img.height > maxh){  
      img.width = Math.round(img.width*(maxh/img.height));  
      img.height = maxh;  
    }  
  } else {  
    // width is the problem  
    if (img.width > maxw){  
      img.height = Math.round(img.height*(maxw/img.width));  
      img.width = maxw;  
    }  
  } 
};

Here's the HTML (using ASP.Net Repeater):

<asp:Repeater ID="rptImages" runat="server">  
<HeaderTemplate>  
</HeaderTemplate>  
<ItemTemplate>  
<a href="#">  
    <div id="thumbnailImageContainer1" onclick="changeCurrentImage(this)">  
        <div id="thumbnailImageContainer2">  
            <img id="thumbnailImage" src="<%# SiteUrl + Eval("ImageThumbnailPath")%>?rn=<%=Random()%>" alt="Photo" onload="resize(this, 60, 105)" />  
        </div>  
    </div>  
</a>  
</ItemTemplate>  
<FooterTemplate>  
</FooterTemplate>  
</asp:Repeater>

Answer 1

Most likely the image is not yet downloaded so img.height and img.width are not yet there. Technically you don't need to wait till the whole image is downloaded, you can poll the image in a timer until width and height are non-zero. This sounds messy but can be done nicely if you take the time to do it right. (I have an ImageLoader utility I made for this purpose....has only one timer even if it is handling multiple images at once, and calls a callback function when it has the sizes) I have to disagree with Marcel....client side works great for this sort of thing, and can work even if the images are from a source other than your server.

Edit: add ImageLoader utility:

var ImageLoader = {
  maxChecks: 1000,
  list: [],
  intervalHandle : null,

  loadImage : function (callback, url, userdata) {
    var img = new Image ();
    img.src = url;
    if (img.width && img.height) {
      callback (img.width, img.height, url, 0, userdata);
      }
    else {
      var obj = {image: img, url: url, callback: callback,
                checks: 1, userdata: userdata};
      var i;
      for (i=0; i < this.list.length; i++)    {
        if (this.list[i] == null)
          break;
        }
      this.list[i] = obj;
      if (!this.intervalHandle)
        this.intervalHandle = setInterval(this.interval, 30);
      }
    },

  // called by setInterval  
  interval : function () {
    var count = 0;
    var list = ImageLoader.list, item;
    for (var i=0; i<list.length; i++) {
      item = list[i];
      if (item != null) {
        if (item.image.width && item.image.height) {
          item.callback (item.image.width, item.image.height, 
             item.url, item.checks, item.userdata);
          ImageLoader.list[i] = null;
          }
        else if (item.checks > ImageLoader.maxChecks) {
          item.callback (0, 0, item.url, item.checks, item.userdata);
          ImageLoader.list[i] = null;
          }
        else {
          count++;
          item.checks++;
          }
        }
      }
    if (count == 0) {
      ImageLoader.list = [];
      clearInterval (ImageLoader.intervalHandle);
      delete ImageLoader.intervalHandle;
      }
    }
};

Example usage:

var callback = function (width, height, url, checks, userdata) {
  // show stuff in the title  
  document.title = "w: " + width + ", h:" + height + 
      ", url:" + url + ", checks:" + checks + ", userdata: " + userdata; 
    var img = document.createElement("IMG");
    img.src = url;
    // size it to be 100 px wide, and the correct 
    // height for its aspect ratio
    img.style.width = "100px";
    img.style.height = ((height/width)*100) + "px";
    document.body.appendChild (img);
    };

  ImageLoader.loadImage (callback,
   "http://upload.wikimedia.org/wikipedia/commons/thumb/" +  
      "1/19/Caerulea3_crop.jpg/800px-Caerulea3_crop.jpg", 1);

  ImageLoader.loadImage (callback, 
   "http://upload.wikimedia.org/wikipedia/commons/thumb/" + 
      "8/85/Calliphora_sp_Portrait.jpg/402px-Calliphora_sp_Portrait.jpg", 2);

Answer 2

With the way you have your code setup, I would try and call your resize function from an onload event.

function resize() { 
  var img = document.getElementById('currentImage');
  var maxh = 375;
  var maxw = 655;
  var ratio = maxh/maxw;  
  if (img.height/img.width > ratio){  
     // height is the problem  
    if (img.height > maxh){  
      img.width = Math.round(img.width*(maxh/img.height));  
      img.height = maxh;  
    }  
  } else {  
    // width is the problem  
    if (img.width > maxw){  
      img.height = Math.round(img.height*(maxw/img.width));  
      img.width = maxw;  
    }  
  } 
};

function changeCurrentImage(conteneur)  
{  
    var img = conteneur.getElementsByTagName("img");

    img.onload = resize;

    var imgUrl = img[0].src;

    var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
    var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
    var currentImg = document.getElementById('currentImage');
    currentImg.src = imgFirstPart + "borne" + imgLastPart;


}

I would play around with that. Maybe use global variables for your maxH/W and image ID(s);

Answer 3

@Comments: No, I can't do that server side since it would refresh the page everytime someone click on a new image. That would be way too bothersome and annoying for the users.

As for the thumbnails, those image are already saved in the appropriate size. Only the big image that shows is about 33% of its size. Since we already have 3 images PER uploaded images, I didn't want to upload a 4th one for each upload, that would take too much server space!

As for the "currentImage", I forgot to add it, so that might be helful lol:

<div id="currentImageContainer">
<div id="currentImageContainer1">
<div id="currentImageContainer2">
<img id="currentImage" src="#" alt="" onload="resize(this, 375, 655)" />
</div>
</div>
</div>

@rob: I'll try the ImageLoader class, that might do the trick.

Answer 4

I found an alternative that is working really well. Instead of changing that IMG width and height, I delete it and create a new one:

function changeCurrentImage(conteneur)  
{ 
    var thumbnailImg = conteneur.getElementsByTagName("img");

    var thumbnailImgUrl = thumbnailImg[0].src;

    var newImgUrl = thumbnailImgUrl.replace("thumbnail", "borne");

    var currentImgDiv = document.getElementById('currentImageContainer2');
    var currentImg = currentImgDiv.getElementById("currentImage");
    if (currentImg != null)
    {
        currentImgDiv.removeChild(currentImg);
    }

    var newImg = document.createElement("img");
    newImageDiv = document.getElementById('currentImageContainer2');
    newImg.id = "currentImage";
    newImg.onload = function() {
        Resize(newImg, 375, 655);
        newImageDiv.appendChild(newImg);
    }
    newImg.src = newImgUrl;
}

Also, in case people wonder, you MUST put the .onload before the .src when assigning an a new source for an image!