如何拍摄基于AndroidViews实现的WebView(webview_flutter)的屏幕截图?

问题描述

我需要从webview_flutter截取WebView的屏幕快照，但这不起作用.

我有一个应用，该应用必须对WebView进行截图，然后对其进行处理.我尝试使用Screenshot包来做到这一点.我发现此信息 https://github.com/fluttercommunity/flutter_webview_plugin/issues/181#issuecomment-497625384

从该链接中，我了解到无法通过Screenshot插件来做到这一点.

 屏幕截图(控制器:_screenshotController，子:WebView(initialUrl:widget._webUrl，onWebViewCreated:(WebViewController webViewController){如果(_controller.isCompleted ==否)_controller.complete(webViewController);}，)，);void takeScreenshot(){_screenshotController.capture().then((文件图像)异步{_screenshot =图片；}); 

当我截取屏幕截图时，我得到了透明的png图像，而我想捕获WebView内容

解决方案

正如我向类似的问题报道的那样a>:

webview_flutter 插件没有提供获取WebView屏幕截图的方法.因此，您可以尝试使用我的插件 flutter_inappwebview ，这是一个Flutter插件，可让您添加内联WebView或打开应用程序内浏览器窗口，其中包含许多用于控制WebView的事件，方法和选项.

要获取屏幕截图，可以使用 InAppWebViewController.takeScreenshot 方法，该方法获取WebView可见视口的屏幕截图(PNG格式)并返回 Uint8List ./p>

下面是一个示例，该示例在页面停止加载时获取WebView的屏幕快照，并显示带有相应屏幕快照图像的警报对话框:

  import'dart:async';导入'dart:typed_data';导入'package:flutter/material.dart';导入'package:flutter_inappwebview/flutter_inappwebview.dart';未来main()异步{WidgetsFlutterBinding.ensureInitialized();runApp(new MyApp());}MyApp类扩展了StatefulWidget {@override_MyAppState createState()=>新的_MyAppState();}类别_MyAppState扩展了State< MyApp>{@override无效的initState(){super.initState();}@override无效dispose(){super.dispose();}@override窗口小部件build(BuildContext context){返回MaterialApp(initialRoute:'/'，路线:{'/':(上下文)=>InAppWebViewExampleScreen()，});}}InAppWebViewExampleScreen类扩​​展了StatefulWidget {@override_InAppWebViewExampleScreenState createState()=>新的_InAppWebViewExampleScreenState();}类_InAppWebViewExampleScreenState扩展了State< InAppWebViewExampleScreen>{InAppWebViewController webView;Uint8List屏幕快照字节;@override无效的initState(){super.initState();}@override无效dispose(){super.dispose();}@override窗口小部件build(BuildContext context){返回脚手架(appBar:AppBar(标题:Text("InAppWebView")))，身体:容器(child:Column(children:< Widget> [展开(子:InAppWebView(initialUrl:"https://github.com/flutter"，initialHeaders:{}，initialOptions:InAppWebViewGroupOptions(crossPlatform:InAppWebViewOptions(debuggingEnabled:true)，)，onWebViewCreated:(InAppWebViewController控制器){webView =控制器；}，onLoadStart:(InAppWebViewController控制器，字符串url){}，onLoadStop :( InAppWebViewController控制器，字符串url)async {screenshotBytes =等待controller.takeScreenshot();showDialog(上下文:上下文，生成器:(上下文){返回AlertDialog(内容:Image.memory(screenshotBytes)，);}，);}，))])));}} 

I need to take a screenshot of WebView from webview_flutter, but it doesn't work.

I have an app which has to take a screenshot of WebView and then process it. I tried to do it using Screenshot package. I found this information https://github.com/fluttercommunity/flutter_webview_plugin/issues/181#issuecomment-497625384

From the link, I learned that it's impossible to do it through the Screenshot plugin.

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;
        }
    );

When I take the screenshot I got transparent png image, whereas I would like to have capture of the WebView content

解决方案

As I reported to this similar issue:

The webview_flutter plugin doesn't offer a way or a method to take the screenshot of the WebView.So, you can try my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.

To take a screenshot, you can use InAppWebViewController.takeScreenshot method, that takes a screenshot (in PNG format) of the WebView's visible viewport and returns a Uint8List.

Here is an example that takes a screenshot of the WebView when the page stops loading and shows an alert dialog with the corresponding screenshot image:

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),
                  );
                },
              );
            },
          ))
        ])));
  }
}

这篇关于如何拍摄基于AndroidViews实现的WebView(webview_flutter)的屏幕截图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！