Javascript Dart：捕捉颤振网络视图的图像

我想知道是否有可能捕获网络视图的图像

以下是我尝试过的：

例如，具有网络视图\u颤振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的打印屏幕时，它不起作用，保存的图像是空的（只有几个字节）：

有什么想法吗

---

或者，除了重新绘制边界，还有其他方法可以捕获png图像吗？

我碰巧遇到了同样的问题

简单的回答是，

repainboundary

无法捕获WebView的内容，因为它是由引擎盖下的本地元素显示的（即iOS上的

WKWebView

和Android上的

WebView

）

---

所以，我找到的唯一解决方案是直接从本机元素捕获内容。不幸的是，对于

webview\u flatter 0.1.0+1

，这不是一项简单的任务，但是还有另一个包可以完成这项任务-

flatter\u在appbrowser

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

_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上使用不推荐的方法，因此可能在一段时间内不受支持。

应用浏览器中的flatter\u

没有将图像保存在来自

的路径中（等待getApplicationDocumentsDirectory（））.path

。我怎么知道它在哪里保存图像？代码工作得很好。我只改变了一件事。更改了'File imgFile=新文件（路径）；`to

File imgFile=wait File（路径）。writeAsBytes（值）。谢谢@trampam
_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");
  });
});