飞镖：捕获Flutter Webview的图像

Question

I wonder if it's possible to capture an image of a webview?

Here is what I tried :

eg with 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
  }

First I tried to make a printscreen of a simple material button: OKAY, it works

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

                ),
            ),

But when I try to make a printscreen of a webview, it doesn't work, the image saved is empty (just a few bytes) :

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

Any idea?

or is there another way than RepaintBoundary to capture a png image?

Answer 1

It happen to me that I had the same problem.

The short answer is that RepaintBoundary cannot capture WebView's content because it was displayed by native elements under the hood (ie WKWebView on iOS and WebView on Android)

So, the only solution I've found was to capture content directly from native element. Unfortunately, that's not a trivial task to do with webview_flutter 0.1.0+1 , but there is another package that do the thing - flutter_inappbrowser https://github.com/pichillilorenzo/flutter_inappbrowser

Once you connected this library you can get the image this way:

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

PS It works on iOS 11+ and on Android it uses deprecated method, so might be not supported in a time.