如何使用Flutter捕获网页截图并在UI中展示？

当然有可行方案，你可以使用flutter_inappwebview这个包来实现网页加载和截图功能，它提供了完整的网页交互能力，包括直接捕获网页截图的API。

实现步骤 #

1. 添加依赖
   在pubspec.yaml中加入以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_inappwebview: ^6.0.0

执行flutter pub get完成依赖安装。

2. 修改代码实现功能
   以下是修改后的完整代码，点击"Get Image"按钮后会加载指定网页并捕获截图，展示在UI中：

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class SidePage extends StatefulWidget {
  const SidePage({Key? key}) : super(key: key);

  @override
  State<SidePage> createState() => _SidePageState();
}

class _SidePageState extends State<SidePage> {
  InAppWebViewController? _webViewController;
  Uint8List? _screenshotBytes;
  // 替换为你需要捕获截图的目标网页链接
  final String targetUrl = "https://flutter.dev";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                image: _screenshotBytes != null
                    ? DecorationImage(
                        image: MemoryImage(_screenshotBytes!),
                        fit: BoxFit.fill,
                      )
                    : null,
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(10),
                  bottomLeft: Radius.circular(10),
                ),
                color: Colors.grey[200],
              ),
            ),
            Container(
              width: 200,
              height: 100,
              decoration: const BoxDecoration(
                color: Color.fromARGB(255, 73, 73, 73),
                borderRadius: BorderRadius.only(
                  topRight: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                ),
              ),
              alignment: Alignment.center,
              child: Text(
                _screenshotBytes != null ? "网页截图已获取" : "Page Title",
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
        const SizedBox(height: 30),
        ElevatedButton(
          onPressed: _captureWebpageScreenshot,
          child: const Text('Get Image'),
        ),
        // 隐藏WebView，仅用于加载网页和捕获截图
        Offstage(
          offstage: true,
          child: SizedBox(
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: InAppWebView(
              initialUrlRequest: URLRequest(url: Uri.parse(targetUrl)),
              onWebViewCreated: (controller) {
                _webViewController = controller;
              },
            ),
          ),
        ),
      ]),
    );
  }

  Future<void> _captureWebpageScreenshot() async {
    if (_webViewController == null) return;

    try {
      // 调用API捕获网页截图
      final screenshot = await _webViewController!.takeScreenshot();
      setState(() {
        _screenshotBytes = screenshot;
      });
    } catch (e) {
      debugPrint("捕获截图失败: $e");
    }
  }
}

关键说明 #

• 用Offstage组件隐藏WebView，避免干扰主UI，仅保留其加载网页和截图的功能
• takeScreenshot()返回Uint8List格式的截图数据，直接通过MemoryImage即可在UI中展示
• 如果需要将截图保存为本地文件，可借助dart:io的File类将Uint8List写入本地存储

平台配置注意事项 #

• Android: 在android/app/src/main/AndroidManifest.xml中确保添加INTERNET权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS: 若目标网页为HTTP协议，需在ios/Runner/Info.plist中添加App Transport Security例外：

  <key>NSAppTransportSecurity</key>
  <dict>
      <key>NSAllowsArbitraryLoads</key>
      <true/>
  </dict>
  

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