Asynchronous 带EXIF旋转校正的多图像上传

希望有人能帮忙？我已经读了很多关于FileReader、Blob、Base64和EXIF的SE文章，并拼凑了一些东西。我在理解异步函数的结构和过程中的顺序/延迟时遇到问题

下面的脚本循环通过一个由多部分组成的表单上传的数组。在循环中，我使用readAsDataURL获取Base64字符串，然后在转换画布之前尝试readAsArrayBuffer从Blob获取EXIF方向代码

很明显，我混淆了异步，有点迷路了

在此阶段，它显示图像（并正确定位第一个图像），但不读取新的EXIF方向，然后所有图像都以相同的方式旋转（可能是因为ArrayBuffer不同步？）。如果我一次上传更多的图片，会有一些重复，这一定是一个同步问题

$(document).on('change', '#files', function(evt){
var files = evt.target.files;
var readerBase64;
var b64 = [];
var ab = [];
var c=0;
for (var i = 0; f = files[i]; i++) {
    console.log('LOOP');
    var blob = f;
    var readerBase64 = new FileReader(); 
    readerBase64.onload = function(evt){
        // console.log('BASE 64 ' + evt.target.result);
        b64.push(evt.target.result);
        var reader = new FileReader(); 
         reader.onloadend = (function(theFile) {
            console.log(this);
            console.log('READER');
             return function(e) {
                console.log('RETURN');
                ab.push(e.target.result);
                 console.log(ab[c]);

                 var view = new DataView(ab[c]);
                  ori = 1;
                    if (view.getUint16(0, false) != 0xFFD8){ori = -2};

                    var length = view.byteLength,
                        offset = 2;

                    while (offset < length) {
                      var marker = view.getUint16(offset, false);
                      offset += 2;

                      if (marker == 0xFFE1) {
                        if (view.getUint32(offset += 2, false) != 0x45786966) {
                          ori = -1;
                        }
                        var little = view.getUint16(offset += 6, false) == 0x4949;
                        offset += view.getUint32(offset + 4, little);
                        var tags = view.getUint16(offset, little);
                        offset += 2;

                        for (var i = 0; i < tags; i++)
                     if (view.getUint16(offset + (i * 12), little) == 0x0112)
                           ori = view.getUint16(offset + (i * 12) + 8, little);
                      }
                      else if ((marker & 0xFF00) != 0xFF00) break;
                      else offset += view.getUint16(offset, false);
                    }      
                 console.log('ori '+ori);
 //    console.log(b64[c]);

                    base64String = b64[c];
                    var img = document.createElement('img');

                    img.setAttribute('src',base64String);
                    //img.src = e.target.result;
                    img.onload = function () {
                    var canvas = document.createElement('canvas');

                    var MAX_WIDTH =1000;
                    var MAX_HEIGHT =800;
                    var width = img.width;
                    var height = img.height;

                    if (width > height) {
                      if (width > MAX_WIDTH) {
                        height *= MAX_WIDTH / width;
                        width = MAX_WIDTH;
                      }
                    } else {
                      if (height > MAX_HEIGHT) {
                        width *= MAX_HEIGHT / height;
                        height = MAX_HEIGHT;
                      }
                    }
                    canvas.width = width;
                    canvas.height = height;
                    var ctx = canvas.getContext("2d");


                    // set proper canvas dimensions before transform & export
                    if (4 < ori && ori < 9) {
                    canvas.width = height;
                    canvas.height = width;
                    } else {
                    canvas.width = width;
                      canvas.height = height;
                    }

                    // transform context before drawing image
                        switch (ori) {
                      case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
                      case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
                      case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
                      case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
                      case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
                      case 7: ctx.transform(0, -1, -1, 0, height , width); break;
                      case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
                      default: break;
                    }                       

                    ctx.drawImage(img, 0, 0, width, height);

                    var dataurl = canvas.toDataURL("image/jpg");

                    //alert(dataurl);
                     // Render thumbnail.
                     var span = document.createElement('span');
                    //var ii = $('#list span').length - 2;
                    // if(ii > 0){
                    //  span.setAttribute('class','hide');
                    //  $('#list span:nth-child(3) p').text("+"+ii);
                    //  }

                      span.innerHTML = 
                      [
                        '<input type="image" class="thumb" name="imgs[]" value="', 
                        dataurl,
                        '" src="', dataurl, 
                        '"/>'
                      ].join('');

                      document.getElementById('list').insertBefore(span, null);                  

                      c++;  
                 }
             }
         })(f);         
         reader.readAsArrayBuffer(blob.slice(0, 64 * 1024));
    }
    readerBase64.readAsDataURL(f);
    //      console.log(f);
 }

$（document）.on（'change'，'#files'，函数（evt）{
var files=evt.target.files；
变量读取器base64；
var b64=[]；
var ab=[]；
var c=0；
对于（var i=0；f=files[i]；i++）{
log（'LOOP'）；
var-blob=f；
var readerBase64=新文件读取器（）；
readerBase64.onload=函数（evt）{
//log（'BASE 64'+evt.target.result）；
b64.push（evt.target.result）；
var reader=new FileReader（）；
reader.onloadend=（函数（文件）{
console.log（this）；
console.log（'READER'）；
返回函数（e）{
console.log（'RETURN'）；
ab.push（即目标、结果）；
console.log（ab[c]）；
var视图=新数据视图（ab[c]）；
ori=1；
if（view.getUint16（0，false）！=0xFFD8）{ori=-2}；
var长度=视图。按长度，
偏移量=2；
while（偏移量<长度）{
var marker=view.getUint16（偏移量，false）；
偏移量+=2；
如果（标记==0xFFE1）{
if（view.getUint32（偏移量+=2，false）！=0x45786966）{
ori=-1；
}
var little=view.getUint16（偏移量+=6，false）=0x4949；
偏移量+=view.getUint32（偏移量+4，小）；
var tags=view.getUint16（偏移量，小）；
偏移量+=2；
对于（变量i=0；i高度）{
如果（宽度>最大宽度）{
高度*=最大宽度/宽度；
宽度=最大宽度；
}
}否则{
如果（高度>最大高度）{
宽度*=最大高度/高度；
高度=最大高度；
}
}
画布宽度=宽度；
canvas.height=高度；
var ctx=canvas.getContext（“2d”）；
//在转换和导出之前设置适当的画布尺寸
if（40）{
//setAttribute（'class'，'hide'）；
//$（“#列表跨度：第n个子（3）p'）。文本（“+”+ii）；
//  }
span.innerHTML=
[
''
].加入（“”）；
document.getElementById（'list'）.insertBefore（span，null）；
C++；
}
}
})（f） )；
reader.readAsArrayBuffer（blob.slice（0,64*1024））；
}
ReaderBase 64
$(document).on('change', '#files', function(evt){
var files = evt.target.files;
var f;
for (var i = 0; f = files[i]; i++) {
    var blob = f;
    getOrientation(f, function(ori , f) {
        console.log(f);
        var readerBase64 = new FileReader(); 
        readerBase64.onload = function(evt){

            console.log(ori);
            console.log(evt.target.result);
            base64String = evt.target.result;
            var img = document.createElement('img');

            img.setAttribute('src',base64String);
            //img.src = e.target.result;
            img.onload = function () {
            var canvas = document.createElement('canvas');

            var MAX_WIDTH =1000;
            var MAX_HEIGHT =800;
            var width = img.width;
            var height = img.height;

            if (width > height) {
              if (width > MAX_WIDTH) {
                height *= MAX_WIDTH / width;
                width = MAX_WIDTH;
              }
            } else {
              if (height > MAX_HEIGHT) {
                width *= MAX_HEIGHT / height;
                height = MAX_HEIGHT;
              }
            }
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");


            // set proper canvas dimensions before transform & export
            if (4 < ori && ori < 9) {
            canvas.width = height;
            canvas.height = width;
            } else {
            canvas.width = width;
              canvas.height = height;
            }

            // transform context before drawing image
                switch (ori) {
              case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
              case 3: ctx.transform(-1, 0, 0, -1, width, height ); break;
              case 4: ctx.transform(1, 0, 0, -1, 0, height ); break;
              case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
              case 6: ctx.transform(0, 1, -1, 0, height , 0); break;
              case 7: ctx.transform(0, -1, -1, 0, height , width); break;
              case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
              default: break;
            }                       

            ctx.drawImage(img, 0, 0, width, height);

            var dataurl = canvas.toDataURL("image/jpg");

            //alert(dataurl);
             // Render thumbnail.
             var span = document.createElement('span');
            //var ii = $('#list span').length - 2;
            // if(ii > 0){
            //  span.setAttribute('class','hide');
            //  $('#list span:nth-child(3) p').text("+"+ii);
            //  }

              span.innerHTML = 
              [
                '<input type="image" class="thumb" name="imgs[]" value="', 
                dataurl,
                '" src="', dataurl, 
                '"/>'
              ].join('');

              document.getElementById('list').insertBefore(span, null);             

            }

        };
        readerBase64.readAsDataURL(f);
    });
   }
});

 //from http://stackoverflow.com/a/32490603
function getOrientation(file, callback) {
  var reader = new FileReader();

  reader.onload = function(event) {
    var view = new DataView(event.target.result);

    if (view.getUint16(0, false) != 0xFFD8) return callback(-2, file);

    var length = view.byteLength,
        offset = 2;

    while (offset < length) {
      var marker = view.getUint16(offset, false);
      offset += 2;

      if (marker == 0xFFE1) {
        if (view.getUint32(offset += 2, false) != 0x45786966) {
          return callback(-1 , file);
        }
        var little = view.getUint16(offset += 6, false) == 0x4949;
        offset += view.getUint32(offset + 4, little);
        var tags = view.getUint16(offset, little);
        offset += 2;

        for (var i = 0; i < tags; i++)
          if (view.getUint16(offset + (i * 12), little) == 0x0112)
            return callback(view.getUint16(offset + (i * 12) + 8, little) , file);
      }
      else if ((marker & 0xFF00) != 0xFF00) break;
      else offset += view.getUint16(offset, false);
    }
    return callback(-1 , file);
  };

  reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};

    $(document).on('submit',function(e){
    e.preventDefault();
    var data = $('#formFeed').serializeArray(); 
        var msg = $('textarea').val();
        data.push({name: 'msg', value: msg});
        var y;
        $('input[type="image"]').each(function(i, obj) {
            y = $(this).attr('src');
            data.push({name: 'img', value: y});
        });

        $.ajax({
            cache: false,
            type : 'POST',
            url  : 'http://localhost:3001/newFeed', 
            data: data,
            contentType: "application/x-www-form-urlencoded",
            success : function(data) {
                console.log(data);
            }
        }); 

});