Дарт: захватить изображение веб-просмотра Flutter

Question

Интересно, возможно ли сделать снимок веб-просмотра?

Вот что я попробовал:

например, с 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, поскольку он отображался встроенными элементами под капотом (т. Е. WKWebView на iOS и WebView на Android)

Итак, единственное решение, которое я нашел, - захват содержимого напрямую из нативного элемента.К сожалению, это не тривиальная задача, связанная с webview_flutter 0.1.0+1, но есть другой пакет, который делает это - flutter_inappbrowser https://github.com/pichillilorenzo/flutter_inappbrowser

После подключения этой библиотеки вы можете получить изображение этого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 Он работает на iOS 11+, а на Android использует устаревший метод, поэтому может не поддерживаться в течение определенного времени.