Flutter Web中Screenshot包无法保存含图片的Widget截图

问题分析 #

在Web环境下，Image.asset依赖浏览器原生的html.ImageElement渲染，Screenshot包默认无法正确捕获这类元素的内容，导致截图中图片显示空白；同时保存时的MIME类型错误也会导致图片无法正常识别显示。

解决方案 #

1. 修正保存函数的MIME类型 #

你的saveInBrowser函数中，data URI的MIME类型设为了text/plain，浏览器无法识别为图片，改成image/png即可：

void saveInBrowser(Uint8List bytes) {
  final dataUri = 'data:image/png;base64,${base64.encode(bytes)}';

  html.document.createElement('a') as html.AnchorElement
    ..href = dataUri
    ..download = 'image.png'
    ..dispatchEvent(html.Event.eventType('MouseEvent', 'click'));
}

2. 预加载Asset图片为Uint8List，改用Image.memory渲染 #

将Image.asset替换为Image.memory，先把Asset资源加载成字节流，让Flutter用自身渲染管线处理图片，确保Screenshot能正常捕获：

修改TestScreen的State代码：

class _TestScreenState extends State<TestScreen> {
  Uint8List? _imageFile;
  Uint8List? _assetImageBytes; // 新增存储图片字节的变量
  ScreenshotController screenshotController = ScreenshotController();

  @override
  void initState() {
    super.initState();
    _loadAssetImage(); // 初始化时预加载图片
  }

  // 加载Asset图片为Uint8List
  Future<void> _loadAssetImage() async {
    final assetData = await rootBundle.load('assets/images/clean-code.png');
    setState(() {
      _assetImageBytes = assetData.buffer.asUint8List();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Screenshot(
        controller: screenshotController,
        child: Column(
          children: [
            Text("Header", style: Theme.of(context).textTheme.headline3),
            SizedBox(
              child: GestureDetector(
                onTap: () {
                  screenshotController.capture().then((image) {
                    setState(() {
                      _imageFile = image!;
                    });
                    saveInBrowser(image!);
                  }).catchError((onError) {
                    print(onError);
                  });
                },
                child: Container(
                  width: 300.0,
                  height: 500.0,
                  // 用Image.memory渲染，加载中显示加载指示器
                  child: _assetImageBytes == null
                      ? const CircularProgressIndicator()
                      : Image.memory(_assetImageBytes!, fit: BoxFit.cover),
                ),
              ),
            ),
            Text("I am subtitle place holder",
                style: Theme.of(context).textTheme.subtitle1),
          ],
        ),
      )),
    );
  }
}

3. 检查pubspec.yaml的Asset配置 #

确保你的pubspec.yaml中正确声明了图片资源路径，避免因路径错误导致图片无法加载：

flutter:
  assets:
    - assets/images/

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