Загрузка нескольких изображений с коррекцией поворота EXIF

Question

Надеюсь, кто-нибудь может помочь? Я прочитал несколько сообщений SE на FileReader, Blobs, Base64 и EXIF ​​и собрал воедино кое-что, что примерно там. У меня проблемы с пониманием структуры асинхронных функций и порядка / задержки в процессе.

Скрипт ниже просматривает загруженный массив из многочастной формы. В цикле у меня есть readAsDataURL для получения Base64 String, а затем попытка readAsArrayBuffer для получения кода ориентации EXIF ​​из BLOB-объекта перед преобразованием холста.

Я явно путаю асинхронность и немного теряюсь.

На этом этапе он отображает изображения (и правильно ориентирует первое), но не считывает новую ориентацию 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);
 }

}); // Файлы меняются

Answer 1

Я решил это, но, возможно, не очень изящно. Загруженные изображения, изображения с измененным размером и с коррекцией ориентации добавляются в форму в элемент с именем #list, готовый для публикации на сервере. Вот код для всех остальных:

$(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);
    });
   }
});

Используя функцию, которую я нашел здесь, с небольшим изменением, чтобы отправить файл Blob обратно с ориентацией в обратном вызове:

 //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));
};

Решение для загрузки состояло в том, чтобы перехватить сообщение и использовать AJAX и JQuery для создания данных POST из ввода [type = 'image']

    $(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);
            }
        }); 

});