Dart ：捕获 Flutter webview 的图像

Question

我想知道是否可以捕获 webview 的图像？

这是我尝试过的：

例如使用 webview_flutter 0.1.0+1 ：

   static GlobalKey previewContainer = new GlobalKey();
   ...            
                new RaisedButton(
                  onPressed: takeScreenShot,
                  child: const Text('Take a Screenshot'),
                ),
  ...
   takeScreenShot() async{
        RenderRepaintBoundary boundary = previewContainer.currentContext.findRenderObject();
        ui.Image image = await boundary.toImage();
        final directory = (await getApplicationDocumentsDirectory()).path;
        ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
        Uint8List pngBytes = byteData.buffer.asUint8List();
        File imgFile = new File(directory+'/screenshot.png');
        imgFile.writeAsBytes(pngBytes);

        //then, save the png image file in Firebase storage : OKAY
  }

首先我尝试制作一个简单材质按钮的打印屏幕：好的，它可以工作

    RepaintBoundary(
            key: previewContainer,
            child: 
                MaterialButton(
                     child: const Text('Test'),
                     textColor: Colors.white,
                    color: Colors.blue,

                ),
            ),

但是当我尝试制作 webview 的打印屏幕时，它不起作用，保存的图像是空的（只有几个字节）：

     RepaintBoundary(
            key: previewContainer,
            child: 
              new SizedBox(
                    height: 280.0,
                    width: 280.0,
                    child: WebView(
                      initialUrl: 'https://flutter.io',
                      javaScriptMode: JavaScriptMode.unrestricted,
                      onWebViewCreated: (WebViewController webViewController)                    {
                        _controller.complete(webViewController);
                      },
                    )
               ),
             )

有什么想法吗？

或者除了 RepaintBoundary 还有其他方法可以捕获 png 图像吗？

Answer 1

我碰巧遇到了同样的问题。

简短的回答是RepaintBoundary无法捕获 WebView 的内容，因为它是由底层的原生元素显示的（即 iOS 上的 WKWebView 和 Android 上的 WebView）

所以，我发现的唯一解决方案是直接从原生元素中捕获内容。不幸的是，这对webview_flutter 0.1.0+1 来说并不是一件容易的事，但是还有另一个包可以做这件事 - flutter_inappbrowser https://github.com/pichillilorenzo/flutter_inappbrowser

连接此库后，您可以通过以下方式获取图像：

_controller.takeScreenshot().then((bytes) async {
  var len = bytes.lengthInBytes;
  debugPrint("screenshot taken bytes $len");

  final directory = (await getApplicationDocumentsDirectory()).path;
  String fileName = DateTime.now().toIso8601String();
  var path = '$directory/$fileName.png';

  File imgFile = new File(path);
  await imgFile.writeAsBytes(bytes).then((onValue) {
    ShareExtend.share(imgFile.path, "Screenshot taken");
  });
});

附：它适用于 iOS 11+，在 Android 上它使用已弃用的方法，因此可能暂时不受支持。