Question

这是stackoverflow上的以下链接的后续内容 Iterating through : Reader.OnLoad

MátéSafranka早些时候帮助了我。

我差不多完成了它，有没有人知道为什么在函数function onAllImagesLoaded(imageList)中，行console.log ("imageList: " + imageList);一直在复制图像数据，这就是它现在正在做的事情，我可以'想通了。如果我选择多个文件，则每个文件的图像数据都相同！ 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()为我的所有图片返回-2。查看代码，当图像的前两个字节不是0xFFD8时会发生这种情况。谷歌告诉我这个特殊的字节序列被称为＆＃34; JPEG帧标签＆＃34;。即getOrientation()仅与JPEG图像兼容，而我尝试过的只是PNG。您需要找到一些方法来处理它。

Answer 2

我在getOrientation（）中遇到了类似的问题。因为它是异步的，所以不会按顺序处理图片。

因此，您需要修改getOrientation（）以返回文件以及exif值，像这样...

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

这样，当它返回时，您可以将exif值与进入的文件进行匹配。

否则，您的脚本将无法知道，并且只会使用进入所有文件的最后一个文件中的数据。

复制base64数据

2 个答案: