如何对基于AndroidViews实现的WebView（webview_flutter）进行截图？

Question

我需要用webview_flutter对WebView进行截图，但是不能用。

我有一个应用程序，它必须对WebView进行截图，然后进行处理。我试着用Screenshot包来做。我发现了这个信息 https:/github.comfluttercommunityflutter_webview_pluginissues181#issuecomment-497625384。

从这个链接中，我了解到通过Screenshot插件是不可能做到的，当我截图的时候，我得到的是透明的png图片，而我希望能捕捉到WebView的内容。

Screenshot(
          controller: _screenshotController,
          child: WebView(
            initialUrl: widget._webUrl,
            onWebViewCreated:
                (WebViewController webViewController) {
              if (_controller.isCompleted == false)
                _controller.complete(webViewController);
            },
          ),
        );



  void takeScreenshot() {
    _screenshotController.capture().then(
            (File image) async {
          _screenshot = image;
        }
    );

当我截图的时候，我得到的是透明的png图片，而我想捕捉的是WebView的内容。

Answer 1

正如我报告给这个类似 发出:

您可以使用我的插件 翩翩起舞_内页浏览，这是一个Flutter插件，它允许你添加内联WebViews或打开应用内浏览器窗口，并有很多事件、方法和选项来控制WebViews。

要进行截图，你可以使用 InAppWebViewController.takeScreenshot 方法，该方法获取WebView可见视口的截图（PNG格式）并返回一张 Uint8List.

下面是一个例子，当页面停止加载时，会对WebView进行截屏，并显示一个带有相应截屏图像的警报对话框。

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

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(initialRoute: '/', routes: {
      '/': (context) => InAppWebViewExampleScreen(),
    });
  }
}

class InAppWebViewExampleScreen extends StatefulWidget {
  @override
  _InAppWebViewExampleScreenState createState() =>
      new _InAppWebViewExampleScreenState();
}

class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
  InAppWebViewController webView;
  Uint8List screenshotBytes;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("InAppWebView")),
        body: Container(
            child: Column(children: <Widget>[
          Expanded(
              child: InAppWebView(
            initialUrl: "https://github.com/flutter",
            initialHeaders: {},
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                  debuggingEnabled: true),
            ),
            onWebViewCreated: (InAppWebViewController controller) {
              webView = controller;
            },
            onLoadStart: (InAppWebViewController controller, String url) {},
            onLoadStop: (InAppWebViewController controller, String url) async {
              screenshotBytes = await controller.takeScreenshot();
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    content: Image.memory(screenshotBytes),
                  );
                },
              );
            },
          ))
        ])));
  }
}