如何在Flutter Web中为Firebase Firestore的上传视频生成缩略图

现有方案故障原因 #

你第五种方案已经非常接近可用状态，仅存在两处核心错误导致生成灰色图片：

• drawImage参数传值错误：你调用的drawImage(video, video.videoWidth, video.videoHeight)方法中，后两个参数为帧绘制的左上角X/Y坐标，等于将整个视频帧绘制到了画布可视区域之外，仅剩下画布默认的灰色填充层，所以仅能得到比例正确的空白图片。
• 事件监听时机错误：onSeeking是视频开始跳转时间点时触发的事件，此时目标帧还未完成加载渲染，应该使用onSeeked事件，确保时间跳转完成、目标帧已就绪后再执行截图逻辑。

修复后可运行代码 #

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class VideoThumbnailLoader extends StatefulWidget {
  final String videoPath;
  final dynamic item; // 替换为你自己的Item数据类型

  const VideoThumbnailLoader({super.key, required this.videoPath, required this.item});

  @override
  State<VideoThumbnailLoader> createState() => _VideoThumbnailLoaderState();
}

class _VideoThumbnailLoaderState extends State<VideoThumbnailLoader> {
  Uint8List? _thumbnailBytes;

  @override
  void initState() {
    super.initState();
    if (widget.item.thumbnail != null) return;
    _generateThumbnail();
  }

  void _generateThumbnail() {
    final VideoElement video = VideoElement();
    video.crossOrigin = 'anonymous';
    video.muted = true;
    video.playsInline = true;
    video.preload = 'auto';

    video.onLoadedMetadata.listen((_) {
      video.currentTime = 1; // 取第1秒的帧作为缩略图
    });

    video.onSeeked.listen((_) async {
      final CanvasElement canvas = CanvasElement(
        width: video.videoWidth,
        height: video.videoHeight,
      );
      // 正确将视频帧绘制到画布左上角，铺满整个画布
      canvas.context2D.drawImageScaled(video, 0, 0, canvas.width!, canvas.height!);
      final blob = await canvas.toBlob('image/jpeg', 0.8); // 导出为80质量的JPG，可自行调整
      final reader = FileReader();
      reader.readAsArrayBuffer(blob);
      reader.onLoadEnd.listen((__) {
        final bytes = reader.result as Uint8List;
        setState(() {
          _thumbnailBytes = bytes;
        });
        DaysService.exportThumbnail(bytes); // 你的上传逻辑
        // 销毁视频元素释放内存
        video.remove();
      });
    });

    video.src = widget.videoPath;
    // 不需要将视频元素添加到DOM，后台静默处理即可
  }

  @override
  Widget build(BuildContext context) {
    if (widget.item.thumbnail != null) {
      return Image.network(widget.item.thumbnail!);
    }
    if (_thumbnailBytes != null) {
      return Image.memory(_thumbnailBytes!);
    }
    // 加载中占位
    return const CircularProgressIndicator();
  }
}

额外优化说明 #

• 本方案不需要将视频元素渲染到Flutter的HtmlElementView中，全程后台静默处理，不会出现不必要的视频渲染性能消耗，也规避了平台视图无法截图的问题。
• 导出格式支持自定义调整，如需透明背景可改为image/png，质量参数可根据业务需求在0-1范围内调整。

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