Question

我试图从通过ajax函数返回的路径列表（10个项目长度）中读取图像，调整每个路径的大小，然后在页面上逐个显示。但是，以下代码仅显示第一个图像（已调整大小），而不显示其他图像。我相当确定调整大小是有效的，因为打印尺寸看起来正确。以下是我在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);
        }
    })
}

Answer 1

您的代码中存在一些问题 1）图像宽度和高度是CSS属性，在String sql="select ID,Hmerominia,Agores,Pliromes,Eksoda,Zhta,Metaforika,Pliromimetafo,Epitages,Xondriki,Noiki,Plirominoiki from Synola"; try{ pst = conn.prepareStatement(sql); rs=pst.executeQuery(); jTable1.setModel(DbUtils.resultSetToTableModel(rs)); // JOptionPane.showMessageDialog(null, "Saved"); }catch(Exception ex){ JOptionPane.showMessageDialog(null, ex); }处理程序中可能是undefined。请改用img.onload 2）this.naturalWidth触发图像加载。将其置于 img.src = 'url';之后。

img.onload

Answer 2

如果我们简化你的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是一个事件，这意味着它会从您的代码中异步运行。在触发第一个img事件之前，您需要使用新的图片元素（以及新的href属性）更新load值。因此onload事件实际上是在img变量的最后一次更新后调用的，当您到达for的最后一个循环时实际发生这种情况。

为什么？

因为for循环没有为变量img创建新范围，所以每次触摸img var时，即使您正在放置在前面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]);
}

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

2 个答案: