Question

我开始使用此代码，允许用户在浏览器中预览上传的图片：

'use strict';
var img = document.querySelector('img');
var span = document.querySelector('span');
document.querySelector('input').addEventListener('change', function(event){
  log('File changed', true);
  var file = event.target.files[0];
  if(file === undefined){
    img.parentElement.style.display = 'none';
    log('No file selected');
    return;
  }
  showImage(file);
});
function log(data, clear){
  if(clear){
    span.innerHTML = '';
  }
  span.innerHTML += '<br>' + data;
}
function showImage(file) {
  log('showImage()');
  if(!window.FileReader){
    return log('FileReader is not supported');
  }
  if(!window.FileReader.prototype.readAsDataURL){
    return log('readAsDataURL is not supported');
  }
  var reader = new FileReader();
  reader.onload = function(event){
    img.src = event.target.result;
    img.parentElement.style.display = 'block';
  };
  reader.readAsDataURL(file);
}

div{
  display:none;
}
img{
  display:block;
  height:100px;
  width:100px;
}

Picture: <input type="file">
<hr>
<div>
  Loaded:
  <img>
</div>
<hr>
Log...
<span></span>

也可在此处找到： https://jsfiddle.net/grewt06v/

这非常简单，让工作做得很好。但后来有人报道说他们在使用三星设备预览以纵向模式拍摄的照片时遇到了麻烦，无论是向左还是向右旋转。这里有一个前后摄像头图片的例子：

三星的后置摄像头：Dropbox ~~Google Drive~~
三星的前置摄像头：Dropbox ~~Google Drive~~

请记住，图像内容已更改，以便更好地了解问题（箭头应始终指向下方），但EXIF数据保持不变。此外，在此处上传时，EXIF数据被剥离，因此我不得不使用 ~~Google Drive~~ Dropbox

所以我必须做一些更改才能检测EXIF并正确旋转图像，这导致我找到a way to check EXIF orientation然后再找到这段代码：

'use strict';
var original = document.querySelectorAll('img')[0];
var rotated = document.querySelectorAll('img')[1];
var span = document.querySelector('span');
document.querySelector('input').addEventListener('change', function(event){
  log('File changed', true);
  var file = event.target.files[0];
  if(file === undefined){
    original.parentElement.style.display = 'none';
    rotated.parentElement.style.display = 'none';
    log('No file selected');
    return;
  }
  getOrientation(file, showImage);
});
// Based on: https://stackoverflow.com/a/32490603/5503625
function getOrientation(file, callback) {
  log('getOrientation()');
  if(!window.FileReader){
    return log('FileReader is not supported');
  }
  if(!window.FileReader.prototype.readAsArrayBuffer){
    return log('readAsArrayBuffer is not supported');
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    if(!window.DataView){
      return log('DataView is not supported');
    }
    if(!window.DataView.prototype.getUint16){
      return log('getUint16 is not supported');
    }
    if(!window.DataView.prototype.getUint32){
      return log('getUint32 is not supported');
    }
    var view = new DataView(e.target.result);
    if (view.getUint16(0, false) != 0xFFD8) return callback(file, -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) return callback(file, -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(file, view.getUint16(offset + (i * 12) + 8, little));
      }
      else if ((marker & 0xFF00) != 0xFF00) break;
      else offset += view.getUint16(offset, false);
    }
    return callback(file, -1);
  };
  reader.readAsArrayBuffer(file);
}
function log(data, clear){
  if(clear){
    span.innerHTML = '';
  }
  span.innerHTML += '<br>' + data;
}
function showImage(file, exifOrientation) {
  log('showImage()');
  log('EXIF orientation ' + exifOrientation);
  if(!window.FileReader){
    return log('FileReader is not supported');
  }
  if(!window.FileReader.prototype.readAsDataURL){
    return log('readAsDataURL is not supported');
  }
  var reader = new FileReader();
  reader.onload = function(event){
    original.src = event.target.result;
    rotated.src = event.target.result;
    original.parentElement.style.display = 'block';
    rotated.parentElement.style.display = 'block';
    var degrees = 0;
    switch(exifOrientation){
      case 1:
        // Normal
        break;
      case 2:
        // Horizontal flip
        break;
      case 3:
        // Rotated 180°
        degrees = 180;
        break;
      case 4:
        // Vertical flip
        break;
      case 5:
        // Rotated 90° -> Horizontal flip
        break;
      case 6:
        // Rotated 270°
        degrees = 90;
        break;
      case 7:
        // Rotated 90° -> Vertical flip
        break;
      case 8:
        // Rotated 90°
        degrees = 270;
        break;
    }
    var transform = 'rotate(' + degrees + 'deg)';
    log('transform:' + transform);
    rotated.style.transform = transform;
    rotated.style.webkitTransform = transform;
    rotated.style.msTransform = transform;
  };
  reader.readAsDataURL(file);
}

div{
  display:none;
}
img{
  display:block;
  height:100px;
  width:100px;
}

Picture: <input type="file">
<hr>
<div>
  Original
  <img>
</div>
<div>
  Rotated
  <img>
</div>
<hr>
Log...
<span></span>

也可在此处找到： https://jsfiddle.net/grewt06v/1/

那一刻我以为我已经解决了这个问题，这一切都很好。但后来有人报告说他们之前没有遇到过的问题，无法预览使用iPhone设备在肖像mote中拍摄的照片，它们会向右旋转。这里有一个前后摄像头图片的例子：

iPhone的后置摄像头：Dropbox ~~Google Drive~~
iPhone的前置摄像头：Dropbox ~~Google Drive~~

同样，请记住改变图像内容以便更好地理解问题（箭头应始终指向下方），但EXIF数据保持不变。此外，在此处上传时，EXIF数据被剥离，因此我不得不使用 ~~Google Drive~~ Dropbox

我不是图像大师，所以我花了一段时间来解决问题是iPhone还存储了EXIF旋转数据（顺时针90度），但图像内容没有旋转（我不知道为什么他们会那样做，但我想知道）

所以，基本上，最快，但可能不是最好的解决方案是使用navigator.userAgent进行浏览器检测以判断它是否是iPhone，因此我不会继续进行EXIF检查

任何人都可以提出更好的防弹方法来检查（如果iPhone不是唯一一个表现得像这样的人）吗？

更新：现在我检查了上传的图片，我发现Google云端硬盘存在同样的问题。三星的两张照片看起来都不错，iPhone的照片也没有。我感到很放心，但我还是喜欢更好的方法

更新：Google Drive会在使用它来旋转图片后删除EXIF信息，因此我不得不使用Dropbox。感谢@Kaiido for letting me know

Answer 1

就像我之前说的那样，我不是图像大师，所以我认为这个答案仍然不是最好的，但我想出了它并且它符合我的需要（希望它能够满足我的需求）。帮助别人）尽管如此，我还是想要一个非常防弹的解决方案

所以我想到了它，它实际上只发生在以肖像模式拍摄的照片时。所以我需要做的是检查EXIF是否想要旋转90度或270度，如果是这样，只有当高度小于宽度时才执行旋转（这意味着肖像图片已经不是旋转）。我的代码现在看起来像这样：

＆＃13;

'use strict';
var original = document.querySelectorAll('img')[0];
var rotated = document.querySelectorAll('img')[1];
var span = document.querySelector('span');
document.querySelector('input').addEventListener('change', function(event){
  log('File changed', true);
  var file = event.target.files[0];
  if(file === undefined){
    original.parentElement.style.display = 'none';
    rotated.parentElement.style.display = 'none';
    log('No file selected');
    return;
  }
  getOrientation(file, showImage);
});
// Based on: https://stackoverflow.com/a/32490603/5503625
function getOrientation(file, callback) {
  log('getOrientation()');
  if(!window.FileReader){
    return log('FileReader is not supported');
  }
  if(!window.FileReader.prototype.readAsArrayBuffer){
    return log('readAsArrayBuffer is not supported');
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    if(!window.DataView){
      return log('DataView is not supported');
    }
    if(!window.DataView.prototype.getUint16){
      return log('getUint16 is not supported');
    }
    if(!window.DataView.prototype.getUint32){
      return log('getUint32 is not supported');
    }
    var view = new DataView(e.target.result);
    if (view.getUint16(0, false) != 0xFFD8) return callback(file, -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) return callback(file, -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(file, view.getUint16(offset + (i * 12) + 8, little));
      }
      else if ((marker & 0xFF00) != 0xFF00) break;
      else offset += view.getUint16(offset, false);
    }
    return callback(file, -1);
  };
  reader.readAsArrayBuffer(file);
}
function log(data, clear){
  if(clear){
    span.innerHTML = '';
  }
  span.innerHTML += '<br>' + data;
}
function showImage(file, exifOrientation) {
  log('showImage()');
  log('EXIF orientation ' + exifOrientation);
  if(!window.FileReader){
    return log('FileReader is not supported');
  }
  if(!window.FileReader.prototype.readAsDataURL){
    return log('readAsDataURL is not supported');
  }
  var reader = new FileReader();
  reader.onload = function(event){
    original.src = event.target.result;
    rotated.src = event.target.result;
    original.parentElement.style.display = 'block';
    rotated.parentElement.style.display = 'block';
    var degrees = 0;
    var portraitCheck = false;
    switch(exifOrientation){
      case 1:
        // Normal
        break;
      case 2:
        // Horizontal flip
        break;
      case 3:
        // Rotated 180°
        degrees = 180;
        break;
      case 4:
        // Vertical flip
        break;
      case 5:
        // Rotated 90° -> Horizontal flip
        break;
      case 6:
        // Rotated 270°
        degrees = 90;
        portraitCheck = true;
        break;
      case 7:
        // Rotated 90° -> Vertical flip
        break;
      case 8:
        // Rotated 90°
        degrees = 270;
        portraitCheck = true;
        break;
    }
    var img = document.createElement('img');
    img.style.visibility = 'none';
    document.body.appendChild(img);
    img.onload = function(){
      if(portraitCheck && this.height > this.width){
        log('Image already rotated');
        degrees = 0;
      }
      var transform = 'rotate(' + degrees + 'deg)';
      log('transform:' + transform);
      rotated.style.transform = transform;
      rotated.style.webkitTransform = transform;
      rotated.style.msTransform = transform;
      document.body.removeChild(this);
    }
    img.src = event.target.result;
  };
  reader.readAsDataURL(file);
}

＆＃13;

div{
  display:none;
}
img{
  display:block;
  height:100px;
  width:100px;
}

＆＃13;

Picture: <input type="file">
<hr>
<div>
  Original
  <img>
</div>
<div>
  Rotated
  <img>
</div>
<hr>
Log...
<span></span>

＆＃13;

此处此处提供： ~~https://jsfiddle.net/grewt06v/5/~~ https://jsfiddle.net/grewt06v/7/

在服务器上保存图像时也出现问题，此解决方案也在那里工作

更新：我的本地测试工作正常，但没有在iPhone上使用Safari，所以我必须首先在DOM中加载图像以获得准确的尺寸

EXIF数据（来自手机的相机，纵向模式）弄乱Javascript中的图像预览

1 个答案: