Question

我正在尝试裁剪调整大小n使用JS在客户端浏览器上显示图像。我能够这样做，除了我的文本循环是错误的。您可以在下面的图像中看到它正在重复上一次迭代。我的图像循环工作正常。 Hint - 第一个文件名文本应为black.jpg。

尝试了几个小时后无法解决问题。以下是代码的修剪版本。如果需要，这里是脚本的complete version。请帮忙，我还在学习。

HTML

<input type="file" id="input" onchange="prevCrop()" multiple> 
<ul id="listWrapper"></ul>

JAVASCRIPT

function prevCrop() {
    var files = document.querySelector('input[type=file]').files;

    for (var i = 0; i < files.length; i++) {
        var file = files[i]; 
        var fileSize = Math.floor(file.size/1024);
        var info = file.name + " " + fileSize + " KB : iteration number - " + i;

        var reader = new FileReader();
        if (reader != null) {
        reader.onload = GetThumbnail;
        reader.readAsDataURL(file);
        }           
    }


    function GetThumbnail(e) {
        var canvas = document.createElement("canvas");
        var newImage = new Image();
        newImage.src = e.target.result;
        newImage.onload = cropResize; 

        function cropResize() {
            canvas.width = 70;
            canvas.height = 70;
            ### more codes here that handles image   ###

            var dataURL = canvas.toDataURL("image/jpg");
            var thumbList = document.createElement('div');
            thumbList.setAttribute('class', 'tlistClass');  
            var nImg = document.createElement('img'); 
            nImg.src = dataURL;     
            var infoSpan = document.createElement('span');                      
            infoSpan.innerHTML = info;          
            var handle = document.getElementById("listWrapper").appendChild(thumbList);
            handle.appendChild(nImg);
            handle.appendChild(infoSpan);   
        }               
    }

}

Answer 1

这是因为onload回调函数是异步触发的，因此代码已经结束。那时info具有在上一次迭代中分配给它的字符串。只有这样才会触发onload个事件，从而导致GetThumbnail的不同调用，所有调用都会info显示相同的值。

而是将info的值绑定到回调函数，如下所示：

    reader.onload = GetThumbnail.bind(null, info);

...并在GetThumbnail函数中为其定义相应的参数：

function GetThumbnail(info, e) {

这样，该函数的每次调用都将具有info的正确值。

javascript for循环重复上一次迭代

1 个答案: