Дублирование данных base64

Question

Это продолжение следующей ссылки на stackoverflow Итерация через: Reader.OnLoad

, с которой Мате Сафранка любезно помог мне раньше.

Я почти закончил с этим, кто-нибудь знает, почему в функции function onAllImagesLoaded(imageList) строка console.log ("imageList: " + imageList); постоянно дублирует данные изображения, это то, что он делает в данный момент, и я не могу понять это , Если я выберу более 1 файла, данные изображения будут одинаковыми для каждого! Arggghh

Спасибо

function encodeImageFileAsURL() {

  var filesSelected = document.getElementById("inputFileToLoad").files;
  var arrayCounter = 0;
  var imageList = [];

  for (arrayCounter = 0; arrayCounter < filesSelected.length; arrayCounter++) {

    var fileToLoad = filesSelected[arrayCounter];
    var fileReader = new FileReader();

    fileReader.onload = (function(fileLoadedEvent) {
      return function(e) {
        var srcData = e.target.result; // base64 data

        getOrientation(fileToLoad, function(orientation) {
        
          if (orientation == 1) {
            imageList.push(srcData);
            if (imageList.length == filesSelected.length) {
          			//console.log ("imageList length: " + imageList.length);
            		//console.log ("filesSelected length: " + filesSelected.length);
                onAllImagesLoaded(imageList);
          	}
          }
          else {
            resetOrientation(URL.createObjectURL(fileToLoad), orientation, function(resetBase64Image) {
              imageList.push(resetBase64Image);
              if (imageList.length == filesSelected.length) {
          			//console.log ("imageList length: " + imageList.length);
            		//console.log ("filesSelected length: " + filesSelected.length);
                onAllImagesLoaded(imageList);
          		}
            });
          }
          
        });
			}
      
    })(fileToLoad);

    fileReader.readAsDataURL(fileToLoad);
  }
}



function onAllImagesLoaded(imageList) {
	console.log ("imageList: " + imageList);
}


function resetOrientation(srcBase64, srcOrientation, callback) {
  var img = new Image();

  img.onload = function() {
    var width = img.width,
      height = img.height,
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext("2d");

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

    // transform context before drawing image
    switch (srcOrientation) {
      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;
    }

    // draw image
    ctx.drawImage(img, 0, 0);

    // export base64
    callback(canvas.toDataURL());
  };

  img.src = srcBase64;
}



function getOrientation(file, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {

    var view = new DataView(e.target.result);
    if (view.getUint16(0, false) != 0xFFD8) {
      return callback(-2);
    }
    var length = view.byteLength,
      offset = 2;
    while (offset < length) {
      if (view.getUint16(offset + 2, false) <= 8) return callback(-1);
      var marker = view.getUint16(offset, false);
      offset += 2;
      if (marker == 0xFFE1) {
        if (view.getUint32(offset += 2, false) != 0x45786966) {
          return callback(-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) {
            return callback(view.getUint16(offset + (i * 12) + 8, little));
          }
        }
      } else if ((marker & 0xFF00) != 0xFF00) {
        break;
      } else {
        offset += view.getUint16(offset, false);
      }
    }
    return callback(-1);
  };
  reader.readAsArrayBuffer(file);
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL -->

<input id="inputFileToLoad" type="file" accept="image/*" multiple="true" style="opacity: 100" onchange="encodeImageFileAsURL();" />

Answer 1

У меня была похожая проблема с getOrientation (). Поскольку он асинхронный, он не обрабатывает фотографии по порядку.

Так что вам нужно изменить getOrientation (), чтобы он возвращал файл, а также значение exif, как это ...

...return callback(file, -2);
...return callback(file, -1);
...return callback(file, view.getUint16(offset + (i * 12) + 8, little));
etc

Таким образом, когда он возвращается, вы можете сопоставить значение exif с файлом, который вошел.

В противном случае ваш сценарий не сможет узнать об этом, и он просто будет использовать данные из последнего файла, который вошел во все файлы.

Answer 2

getOrientation() вернул -2 для всех моих изображений. Глядя на код, это происходит, когда первые два байта изображения не равны 0xFFD8. Google говорит мне, что эта конкретная последовательность байтов называется «тег кадра JPEG». То есть getOrientation() совместимо только с изображениями JPEG, тогда как все, что я пробовал, были PNG. Вам нужно найти способ справиться с этим.