HTML5 Video海报图片显示异常求助：图片时而横向或倒置

这个问题我之前踩过坑！核心原因是图片的EXIF方向元数据——很多手机拍摄的照片会自带方向标记（比如竖拍时会记录需要顺时针旋转90度），但浏览器在渲染<video>的poster属性时，并不会自动读取并应用这个方向信息，直接显示原始像素数据，所以就会出现横向显示或倒置的情况。

解决方案思路 #

要解决这个问题，我们需要：

• 读取图片文件中的EXIF方向标签
• 根据方向信息，用Canvas将图片纠正到正确的显示角度
• 将纠正后的图片转为Blob，生成新的URL设置为Video的poster

具体实现代码 #

我会用常用的Exif.js来读取EXIF数据（这个库轻量且易用），修改你的原函数如下：

var showLocalThumbnailVideoInPlayer = function(file) {
  // 仅处理图片类型文件
  if (!file.type.startsWith('image/')) return;

  // 读取图片的EXIF元数据
  Exif.getData(file, function() {
    var orientation = Exif.getTag(this, 'Orientation');
    
    // 创建临时图片元素加载本地文件
    var img = new Image();
    img.onload = function() {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');
      
      // 根据EXIF方向，调整Canvas和绘制逻辑
      switch(orientation) {
        case 2: // 水平翻转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.scale(-1, 1);
          ctx.drawImage(img, -img.width, 0);
          break;
        case 3: // 180度旋转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.rotate(Math.PI);
          ctx.drawImage(img, -img.width, -img.height);
          break;
        case 4: // 垂直翻转
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.scale(1, -1);
          ctx.drawImage(img, 0, -img.height);
          break;
        case 5: // 水平翻转后顺时针90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.scale(1, -1);
          ctx.drawImage(img, 0, -img.width);
          break;
        case 6: // 顺时针90度（最常见的手机竖拍情况）
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(0.5 * Math.PI);
          ctx.drawImage(img, 0, -img.height);
          break;
        case 7: // 水平翻转后逆时针90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(-0.5 * Math.PI);
          ctx.scale(-1, 1);
          ctx.drawImage(img, -img.height, 0);
          break;
        case 8: // 逆时针90度
          canvas.width = img.height;
          canvas.height = img.width;
          ctx.rotate(-0.5 * Math.PI);
          ctx.drawImage(img, -img.width, 0);
          break;
        default: // 正常方向，直接绘制
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0);
      }
      
      // 将纠正后的Canvas转为Blob，生成新的URL
      canvas.toBlob(function(blob) {
        var correctedFileURL = URL.createObjectURL(blob);
        var videoNode = document.querySelector('video');
        
        // 释放旧的URL，避免内存泄漏
        if (videoNode.poster) {
          URL.revokeObjectURL(videoNode.poster);
        }
        
        videoNode.poster = correctedFileURL;
        videoNode.load();
      }, file.type);
    };
    // 加载本地文件到图片元素
    img.src = URL.createObjectURL(file);
  });
};

补充说明 #

• 你需要先引入Exif.js，可以直接通过CDN引入或者本地下载使用
• 记得在替换poster URL时，调用URL.revokeObjectURL释放旧的URL，避免内存占用过高
• 如果不想依赖第三方库，也可以自己手动解析文件的EXIF数据，但逻辑会比较繁琐，Exif.js已经封装好了常用的标签读取逻辑，推荐使用

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