javascript - 循环: images land on the last field only

Question

我在循环方面遇到了一些问题。我正在构建一个小工具，用户必须上传 12 张图像。图像被裁剪成矩形并放置在按钮上。我几乎准备好了，但不知怎的，循环不能很好地工作。所有图像都落在最后一个按钮上。也许这里的循环有问题？

JS/JQuery:

for (var i = 0; i < 12; i++) {
    var j=i+1;
    var reader = new FileReader();
    reader.onload = function (e) {
        var img = new Image();
        img.src = e.target.result;

        img.onload = function () {

            var getimage= '#getimage'+j;

            // CREATE A CANVAS ELEMENT AND ASSIGN THE IMAGES TO IT.
            var canvas = document.createElement("canvas");

            var ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, canvas.width, canvas.height)
            var posh, posw;
            var factheight=img.height;
            var factwidth=img.width;
            if(factwidth<factheight){
                canvas.width = img.width;
                canvas.height= img.width;
                posh=(img.height-img.width)/2;
                posw=0;
            }
            else if(factheight<factwidth){

                canvas.height = img.height;
                canvas.width = img.height;
                posh=0;
                posw=(img.width-img.height)/2;
            }
            else{
                canvas.width = img.width;
                canvas.height= img.height;
                posh=0;
                posw=0;
            }
            ctx.drawImage(img, posw, posh, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);

            var cropped=canvas.toDataURL("image/png");

            $(getimage).attr("src",cropped);     // SHOW THE IMAGES OF THE BROWSER.
        }
    }

    reader.readAsDataURL($('.multiupload')[0].files[i]);

 }

这也是 JSFiddle 的链接。感谢您的帮助，因为我不确切知道 reader.readAsDataURL($('.multiupload')[0].files[i]); 和 target.result 作品

Answer 1

我猜测您的循环在任何图像完全加载之前就已完成，因此 j 在用于查找相关按钮之前将为 11。尝试改变

img.onload = function () { .... }

至

img.onload = myFunction(id)

然后将所有内容从内联函数移到其自己的带有输入参数的函数中。然后将 j 作为 id 参数传递。