Flutter Web如何读取剪贴板图片转为List<Uint8List>格式

问题原因 #

pasteboard包的Pasteboard.image接口对Web端适配不完善，未正确对接浏览器原生剪贴板API的图片读取逻辑，加上浏览器对剪贴板访问有严格的安全上下文限制，因此会返回null。

实现思路 #

直接对接浏览器原生Clipboard API即可，不需要依赖第三方pasteboard包，兼容性最好：

• 导入Web专属的dart:html库，该库仅在Flutter Web环境下生效
• 读取剪贴板的逻辑必须放在用户主动触发的交互回调（点击、键盘按下、系统粘贴事件）中执行，不能在页面初始化、异步延迟后调用，否则会被浏览器安全策略拦截
• 读取到剪贴板中的图片Blob后，转换为Uint8List格式存入集合即可

可直接运行的代码示例 #

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

class Experiment extends StatefulWidget {
  static const String routeName = '/experiment';
  const Experiment({Key? key}) : super(key: key);

  @override
  State<Experiment> createState() => _ExperimentState();
}

class _ExperimentState extends State<Experiment> {
  List<Uint8List> _pickedBytes = <Uint8List>[];

  // 点击按钮主动读取剪贴板图片
  void clickPaste() async {
    try {
      final clipboardItems = await html.window.navigator.clipboard?.read();
      if (clipboardItems == null) return;

      for (final item in clipboardItems) {
        // 匹配所有图片类型的剪贴板内容
        final imageType = item.types.where((type) => type.startsWith('image/')).firstOrNull;
        if (imageType == null) continue;
        
        final blob = await item.getType(imageType);
        // Blob转Uint8List
        final reader = html.FileReader();
        reader.readAsArrayBuffer(blob);
        await reader.onLoad.first;
        final bytes = reader.result as Uint8List;
        
        setState(() {
          _pickedBytes.add(bytes);
        });
      }
    } catch (e) {
      debugPrint('读取剪贴板失败: $e');
    }
  }

  @override
  void initState() {
    super.initState();
    // 监听全局Ctrl/Command+V粘贴事件，体验更好无需额外申请权限
    html.window.addEventListener('paste', (event) async {
      final pasteEvent = event as html.ClipboardEvent;
      final items = pasteEvent.clipboardData?.items;
      if (items == null) return;
      
      for (final item in items) {
        if (item.type?.startsWith('image/') != true) continue;
        final blob = item.getAsFile();
        if (blob == null) continue;
        
        final reader = html.FileReader();
        reader.readAsArrayBuffer(blob);
        await reader.onLoad.first;
        final bytes = reader.result as Uint8List;
        
        setState(() {
          _pickedBytes.add(bytes);
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                const Text("Experiment"),
                ElevatedButton(
                  onPressed: clickPaste,
                  child: const Text("读取剪贴板图片"),
                )
              ],
            ),
            // 展示已读取的图片
            Expanded(
              child: ListView.builder(
                itemCount: _pickedBytes.length,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Image.memory(_pickedBytes[index]),
                  );
                },
              ),
            )
          ],
        ),
      )
    );
  }
}

注意事项 #

• 仅在localhost或者HTTPS环境下生效，HTTP环境浏览器会默认禁用剪贴板API
• 主动调用clipboard.read()接口时，浏览器会弹出剪贴板权限申请，用户允许后才能正常读取

提示：监听全局paste事件实现快捷键粘贴的体验更好，因为是用户主动触发的系统粘贴操作，浏览器默认放行，不需要额外弹权限申请，兼容性比主动读取接口更高

• 该逻辑仅能读取剪贴板中存储的位图内容，如果复制的是本地文件路径、网页图片链接，不会被识别为图片Blob，需要单独做文件/链接解析
• 需要支持多图粘贴、更多图片格式时，扩展遍历剪贴板item的类型匹配规则即可

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