Flutter Web使用Screenshot插件截图报错：toImage不支持Web环境

问题原因 #

Flutter Web环境不支持toImage方法，而Screenshot插件默认依赖该方法实现截图，因此触发unsupported operation: toimage is not supported on the web错误。

解决方案 #

针对Web端单独实现截图逻辑，结合原插件的非Web逻辑，实现跨平台兼容。以下提供两种可行方案：

方案1：基于HTML Canvas API适配Web端 #

步骤1：添加依赖

在pubspec.yaml中补充依赖：

dependencies:
  flutter:
    sdk: flutter
  screenshot: ^2.1.0 # 保留现有Screenshot插件版本
  html: ^0.15.4

步骤2：修改代码实现

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

class WebScreenshotDemo extends StatefulWidget {
  const WebScreenshotDemo({super.key});

  @override
  State<WebScreenshotDemo> createState() => _WebScreenshotDemoState();
}

class _WebScreenshotDemoState extends State<WebScreenshotDemo> {
  final ScreenshotController screenshotController = ScreenshotController();

  Future<void> captureTargetWidget() async {
    if (kIsWeb) {
      // Web端专属截图逻辑
      final targetElement = html.document.getElementById('target-red-container');
      if (targetElement != null) {
        final canvas = html.CanvasElement(
          width: targetElement.clientWidth,
          height: targetElement.clientHeight,
        );
        final context = canvas.context2D;

        // 将目标DOM元素绘制到Canvas
        await context.drawImageToRect(
          targetElement as html.ImageElement,
          html.Rectangle(0, 0, targetElement.clientWidth, targetElement.clientHeight),
        );

        // 转换为Uint8List格式的图片数据
        final blob = await canvas.toBlob('image/png');
        final reader = html.FileReader();
        reader.readAsArrayBuffer(blob!);
        await reader.onLoad.first;
        final Uint8List capturedImage = reader.result as Uint8List;

        // 此处添加截图后的业务逻辑（如保存、预览）
        print('Web截图完成，数据长度：${capturedImage.length}');
      }
    } else {
      // 非Web端使用原生Screenshot插件逻辑
      final capturedImage = await screenshotController.capture(
        delay: const Duration(milliseconds: 10),
      );
      if (capturedImage != null) {
        // 非Web端业务处理逻辑
        print('非Web平台截图完成');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Builder(
              builder: (context) {
                if (kIsWeb) {
                  // Web端生成带ID的DOM容器
                  return HtmlElementView(
                    viewType: 'target-container',
                    onCreatePlatformView: (controller) {
                      final container = html.DivElement()
                        ..id = 'target-red-container'
                        ..style.width = '200px'
                        ..style.height = '200px'
                        ..style.backgroundColor = 'red';
                      controller.onPlatformViewCreated(container);
                      return container;
                    },
                  );
                } else {
                  // 非Web端用Screenshot包裹目标Widget
                  return Screenshot(
                    controller: screenshotController,
                    child: Container(
                      color: Colors.red,
                      height: 200,
                      width: 200,
                    ),
                  );
                }
              },
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: captureTargetWidget,
              child: const Text('截取截图'),
            ),
          ],
        ),
      ),
    );
  }
}

方案2：使用RenderRepaintBoundary（需启用Canvaskit渲染） #

该方案依赖Flutter Web的Canvaskit渲染器，对复杂Widget兼容性更好。

步骤1：配置Canvaskit渲染

1. 在web/index.html中添加：

<script>flutterWebRenderer = 'canvaskit';</script>

2. 在pubspec.yaml中添加：

flutter:
  web:
    renderer: canvaskit

步骤2：实现截图代码

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

class RepaintBoundaryScreenshot extends StatefulWidget {
  const RepaintBoundaryScreenshot({super.key});

  @override
  State<RepaintBoundaryScreenshot> createState() => _RepaintBoundaryScreenshotState();
}

class _RepaintBoundaryScreenshotState extends State<RepaintBoundaryScreenshot> {
  final GlobalKey _repaintKey = GlobalKey();

  Future<void> captureWidget() async {
    final renderObject = _repaintKey.currentContext?.findRenderObject();
    if (renderObject is RenderRepaintBoundary) {
      final image = await renderObject.toImage(pixelRatio: 1.0);
      final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      final Uint8List capturedImage = byteData!.buffer.asUint8List();
      
      // 此处处理截图数据
      print('截图完成');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RepaintBoundary(
              key: _repaintKey,
              child: Container(
                color: Colors.red,
                height: 200,
                width: 200,
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: captureWidget,
              child: const Text('截取截图'),
            ),
          ],
        ),
      ),
    );
  }
}

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