不使用Canvas修复Blob图片EXif旋转：jQuery上传代码整合求助

我来帮你搞定这个图片旋转的问题！这是因为很多手机拍摄的图片带有EXIF方向元数据，浏览器默认不会自动校正这个方向，导致预览时出现90度旋转的情况。下面是整合了blueimp JavaScript-Load-Image的完整代码，完美适配你现有的逻辑：

完整代码示例 #

<!-- 引入依赖库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blueimp-load-image@5.16.0/js/load-image.all.min.js"></script>

<form id="form1" runat="server">
  <input type='file' id="inputFile" multiple /> <!-- 加上multiple支持多文件上传 -->
</form>
<div class="new"></div>

<script>
function readURL() {
  var fileList = this.files;
  var ValidImageTypes = ["image/gif", "image/jpeg", "image/png"];
  
  for(var i = 0; i < fileList.length; i++){
    var file = fileList[i];
    var fileType = file.type;
    
    // 验证图片格式
    if ($.inArray(fileType, ValidImageTypes) > -1) {
      // 使用blueimp loadImage处理EXIF方向
      loadImage(
        file,
        function(img) {
          // 创建包含校正后图片的容器
          var imgDiv = $('<div class="my-img-div" style="width:auto; display:inline-block;" ></div>');
          imgDiv.append(img);
          $('.new').append(imgDiv);
          
          // 清理URL对象，避免内存泄漏
          if (img.src && img.src.startsWith('blob:')) {
            window.URL.revokeObjectURL(img.src);
          }
        },
        {
          orientation: true, // 关键：自动校正EXIF方向
          maxWidth: 800, // 可选：限制预览图宽度，避免过大
          maxHeight: 800
        }
      );
    }
  }
}

var inputfile = document.getElementById("inputFile");
inputfile.addEventListener("change", readURL, false);
</script>

关键改动说明 #

• 引入blueimp库：添加了Load-Image的CDN链接，它会自动解析并校正图片的EXIF方向信息。
• 替换原预览逻辑：用loadImage函数替代直接创建ObjectURL的方式，通过orientation: true参数开启方向校正功能。
• 保留原有验证逻辑：继续保留了图片格式校验的代码，确保只有指定类型的图片会被处理。
• 优化内存占用：处理完图片后主动释放blob URL，避免浏览器内存泄漏。
• 可选体验增强：添加了maxWidth/maxHeight参数，限制预览图尺寸，避免超大图片拖慢页面加载。

这样修改后，不管是竖拍还是横拍的图片，预览时都会自动显示为正确的方向啦！

内容的提问来源于stack exchange，提问作者Abilash Erikson