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

Question

需要为特定区域截取屏幕截图。试过 RepaintBoundary和 GlobalKey .小工具如 Text和 Container工作正常，但 Image没有。 Image截图中的区域为空白(白色或黑色)。

试过 How to take a screenshot of the current widget - 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

You can try this!

   RenderRepaintBoundary boundary =
      mainRepaintKey.currentContext.findRenderObject();
  ui.Image image = await boundary.toImage(pixelRatio: 0.8);
  ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  File origFile = File(
      "${(await FileUtils.getDirectoryPath()).path}/${Id}_$name.png")
    ..writeAsBytesSync(byteData.buffer.asUint8List());

  File compressedFile = await FlutterImageCompress.compressAndGetFile(
      origFile.path, origFile.path,
      quality: 10, format: CompressFormat.png);

  Uint8List pngBytes = compressedFile.readAsBytesSync();