uniapp H5 视频上传前如何旋转视频画面90度

在uniapp开发H5页面时，需要实现视频上传功能，但发现部分手机拍摄的视频在竖屏录制时画面方向不正确，上传后会出现90度旋转的问题。请问如何在视频上传前对视频画面进行旋转校正，确保上传后的视频方向正确？希望了解具体的实现方法或代码示例，最好能兼容不同机型的拍摄方向。

2 回复

使用uni.chooseVideo选择视频后，可通过canvas绘制并旋转视频画面，然后使用uni.canvasToTempFilePath导出旋转后的视频文件，最后上传。


在 UniApp 中，H5 平台上传视频前旋转画面 90 度，可以通过以下步骤实现：

实现思路

  1. 使用 <input type="file"> 选择视频文件。
  2. 通过 <canvas> 结合视频绘制并旋转画面。
  3. 将旋转后的画面导出为 Blob 或 Base64 格式。
  4. 上传处理后的视频文件。

示例代码

// 选择视频文件
const input = document.createElement('input');
input.type = 'file';
input.accept = 'video/*';
input.onchange = (e) => {
  const file = e.target.files[0];
  rotateVideo(file, 90); // 旋转90度
};
input.click();

// 旋转视频函数
function rotateVideo(file, degrees) {
  const video = document.createElement('video');
  video.src = URL.createObjectURL(file);
  video.onloadedmetadata = () => {
    video.play(); // 播放以解码帧
    video.oncanplay = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      
      // 根据旋转角度调整 canvas 尺寸
      if (degrees % 180 === 90) {
        canvas.width = video.videoHeight;
        canvas.height = video.videoWidth;
      } else {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
      }
      
      // 旋转并绘制画面
      ctx.translate(canvas.width / 2, canvas.height / 2);
      ctx.rotate((degrees * Math.PI) / 180);
      ctx.drawImage(video, -video.videoWidth / 2, -video.videoHeight / 2);
      
      // 导出为 Blob
      canvas.toBlob((blob) => {
        const rotatedFile = new File([blob], file.name, { type: file.type });
        // 上传 rotatedFile（例如使用 uni.uploadFile）
        console.log('旋转后的文件:', rotatedFile);
      }, file.type);
    };
  };
}

注意事项

  • 兼容性：部分浏览器可能限制自动播放，需用户交互触发。
  • 性能：大文件处理可能较慢，建议分帧或提示用户。
  • 格式支持：确保导出格式与原文件一致（如 MP4）。

上传处理后的文件

使用 uni.uploadFile 上传旋转后的视频：

uni.uploadFile({
  url: '你的上传地址',
  filePath: rotatedFile,
  name: 'file',
  success: (res) => {
    console.log('上传成功', res);
  }
});

此方法适用于 H5 平台，其他平台（如 App）需调用原生 API 或插件实现旋转。

回到顶部