javascript - jqueryで非同期の各ループを作成します

Question

これは私の各ループです:-

var image_obj = {};

$(".wrapper").each(function (index, data) {
  var dfile = this.getElementsByClassName('image')[0];
  file = dfile.files[0];
  if(file != null) {
    var fr = new FileReader();


fr.onload = function (e) {

          img = new Image();
          img.onload = function (k) {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            objindex = "obj_" + index;
            image_obj[objindex] = canvas.toDataURL("image/jpeg");

          };
          img.src = fr.result;
        };
        fr.readAsDataURL(file);
      }
    });

base_64 でエンコードされた画像をオブジェクトに保存するには、各ループのインデックスが必要です。

しかし、各ループの実行が に到達する前に終了するため、インデックスは順番に表示されませんcanvas.getContext("2d");。