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的内容，因为它是由幕后的本机元素显示的（例如，iOS上的WKWebView和OS上的WebView Android）

因此，我找到的唯一解决方案是直接从本机元素捕获内容。不幸的是，使用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");
  });
});

P.S。它可在iOS 11+和Android上使用不推荐使用的方法，因此可能暂时不支持。

飞镖：捕获Flutter Webview的图像

1 个答案: