Question

我在这里遇到了一些问题。我一直在尝试用JavaScript做一个图像库，但是我遇到了一些问题。我可以在第一次图像加载时调整图像大小，但是一旦我加载另一个图像，它就不会再调整大小了！由于用户可以上传大量不同尺寸的图片，我真的需要让它工作。

我已经检查了现成的图片库等等，而且我没有做任何我需要做的事情。

这是我的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;  
    }  
  } 
};

这是HTML（使用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

很可能图片尚未下载，因此img.height和img.width尚未出现。从技术上讲，您不需要等到下载整个图像，您可以在计时器中轮询图像，直到宽度和高度不为零。这听起来很混乱，但如果你花时间做正确的话，可以很好地完成。（我有一个ImageLoader实用程序，我为此目的....只有一个计时器，即使它一次处理多个图像，并在它有大小时调用回调函数）我不得不反对Marcel ....客户端非常适用于此类事情，即使图像来自服务器以外的其他来源，也可以正常工作。

编辑：添加ImageLoader工具：

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;
      }
    }
};

使用示例：

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

通过设置代码的方式，我会尝试从onload事件中调用resize函数。

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;


}

我会玩弄它。也许使用全局变量作为你的maxH / W和图像ID;

Answer 3

@评论：不，我不能做那个服务器端，因为每次有人点击新图像时它都会刷新页面。这对用户来说太麻烦和烦人了。

对于缩略图，这些图像已经以适当的大小保存。只有显示的大图像大约是其大小的33％。由于我们已经有3张图片PER上传图片，我不想为每次上传上传第4张图片，这会占用太多的服务器空间！

至于“currentImage”，我忘记添加它，所以这可能是有帮助的lol：

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

@rob：我会尝试使用ImageLoader类，这可能会解决问题。

Answer 4

我找到了一种效果非常好的替代品。我没有更改IMG的宽度和高度，而是删除它并创建一个新的：

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;
}

另外，如果人们想知道，在为图像分配新的源时，必须将.onload放在.src之前！

调整动态图像的大小不会超过一次

4 个答案: