如何在JavaScript中调整大小和显示图像

我试图从通过ajax函数返回的路径列表（10个项目）中读取图像，调整每个大小，然后在页面上逐个显示。但是，下面的代码仅显示第一个图像（调整大小），而其他图像不显示。我相当确定调整大小的工作，因为印刷尺寸看起来是正确的。以下是我在JavaScript中的代码：如何在JavaScript中调整大小和显示图像

// Helper function 
function scaleSize(maxW, maxH, currW, currH){ 
    var ratio = currH/currW; 
    if(currW >= maxW && ratio <= 1) { 
     currW = maxW; 
     currH = currW * ratio; 
    } else if(currH >= maxH) { 
     currH = maxH; 
     currW = currH/ratio; 
    } 
    return [currW, currH]; 
} 

function get_similar_images(image_name) { 
    console.log(image_name) 
    $.ajax({ 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     url: "/get_similar", 
     dataType: "json", 
     async: true, 
     data: JSON.stringify({name: image_name}), 
     success: function(data) { 
      console.log(data); 
      image_list = data['images'] 
      category = data['category'] 
      for (var i=0; i<image_list.length; i++) { 
       var img = document.createElement("img"); 
       img.src = "static/products/"+category+"/"+image_list[i]; 
       var actualH; 
       var actualW; 
       var newH; 
       var newW; 
       img.onload = function(){ 
        actualW = this.width; 
        actualH = this.height; 
        console.log(actualW, actualH) 
        var newSize = scaleSize(300, 300, actualW, actualH); 
        console.log(newSize) 
        img.width = newSize[0]; 
        img.height = newSize[1]; 
        document.getElementById('imageDiv').appendChild(img) 
       }; 
      } 
     }, 
     error: function(xhr, status, error) { 
      // console.log(xhr.responseText); 
     } 
    }) 
}

来源

2016-06-19 Melanie

欢迎SO！首先，你的'image_list.length'大于1？ –

是的，它有10个项目长 – Melanie

当你记录'newSize'时，你有期望值（宽度和高度小于或等于300）？ –

如果我们简化您的for循环这样的：

var img = document.createElement("img"); 
img.src = image_list[0]; 
img.onload = function() { 
    console.log(img); 
}; 

var img = document.createElement("img"); 
img.src = image_list[1]; 
img.onload = function() { 
    console.log(img); 
};

你会明白的地方你的错误的来源。 onload是一个事件，这意味着它与您的代码异步运行。在触发第一个load事件之前，您正在使用新图像元素更新img值（和新的href属性）。因此onload事件实际上是在最后一次更新img变量后调用的，当您到达for的最后一个循环时，实际发生该事件。

为什么？

因为for循环不为变量创建img一个新的范畴，所以每次你触摸img变种，即使你把前面var，原来img被更新。

你应该再使用一个函数，因为函数实际上创建变量里面一个新的作用域声明（var myVar）：

function injectAndResize(imageUrl) { 
    var img = document.createElement("img"); 
    img.src = imageUrl; 
    var actualH; 
    var actualW; 
    var newH; 
    var newW; 
    img.onload = function() { 
    actualW = this.width; 
    actualH = this.height; 
    var newSize = scaleSize(300, 300, actualW, actualH); 
    this.width = newSize[0]; 
    this.height = newSize[1]; 
    document.getElementById('imageDiv').appendChild(img); 
    }; 
} 

for (var i = 0; i < image_list.length; i++) { 
    injectAndResize(image_list[i]); 
}

来源

2016-06-19 17:29:20

这有效 - 很有意义！你的帮助！ – Melanie

不客气^^ –

代码中有几个问题。
1）图像宽度和高度是CSS属性，可能是img.onload处理程序中的undefined。改为使用this.naturalWidth。
2）img.src = 'url';触发图像加载。将它放置后img.onload。

success: function(data) { 
     console.log(data); 
     image_list = data.images; 
     category = data.category; 
     for (var i=0; i<image_list.length; i++) { 
      var img = document.createElement("img"); 
      img.onload = function(){ 
       var actualW = this.naturalWidth; 
       var actualH = this.naturalHeight; 
       console.log(actualW, actualH) 
       var newSize = scaleSize(300, 300, actualW, actualH); 
       console.log(newSize) 
       this.width = newSize[0]; 
       this.height = newSize[1]; 
       //also think what to do with images which are already there 
       //probably remove 
       document.getElementById('imageDiv').appendChild(this) 
      };//img.onload 
      img.src = "static/products/"+category+"/"+image_list[i]; 
     }//for 
    },//success

来源

2016-06-19 17:27:04

如何在JavaScript中调整大小和显示图像

回答

相关问题