flutter - 如何使用 RepaintBoundary 截取图像小部件的屏幕截图？

Question

需要对特定区域进行截图。尝试过RepaintBoundary并且GlobalKey。小部件可以Text正常Container工作，但Image不能。Image截图中的区域为空白（白色或黑色）。

尝试过如何截取当前小部件的屏幕截图 - Flutter但没有运气。

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static GlobalKey previewContainer = new GlobalKey();
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
        key: previewContainer,
        child: new Scaffold(
          appBar: new AppBar(
            title: new Text(widget.title),
          ),
          body: new Center(
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Text(
                  'You have pushed the button this many times:',
                ),
                new Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.display1,
                ),
                new RaisedButton(
                  onPressed: takeScreenShot,
                  child: const Text('Take a Screenshot'),
                ),
                Container(
                  height: 150.0,
                  child: Image(
                    image: AssetImage('assets/images/bg2.jpeg'),
                  ),
                ),
                new Stack(
                  children: <Widget>[
                    new Text('stack 1'),
                    new Text('stack  2'),
                    new Text('stack   3'),
                  ],
                ),
              ],
            ),
          ),
          floatingActionButton: new FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        ));
  }

  takeScreenShot() async {
    RenderRepaintBoundary boundary =
        previewContainer.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    final directory = (await getExternalStorageDirectory()).path;
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    print(pngBytes);
    File imgFile = new File('$directory/$_counter-screenshot.png');
    print(imgFile);
    imgFile.writeAsBytes(pngBytes);
  }
}

Answer 1

Future<void> _takeScreenShot(context) async {
    RenderRepaintBoundary boundary = _repaintKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    final path = join(
      (await getTemporaryDirectory()).path, "screenshot${DateTime.now().toIso8601String()}.png");
    File imgFile = File(path);
    imgFile.writeAsBytes(pngBytes).then((value) {
      Navigator.of(context).pushNamed(Routes.uploadImage, arguments: value.uri.path);
    }).catchError((onError) {
      print(onError);
    });
}