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

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);
    });
}

Answer 2

您可以尝试！

   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();

Answer 3

尝试使用背景颜色。当图像颜色为透明时，您可能无法在某些应用程序中正确看到它。

我所做的是将目标屏幕截图包装在一个带有颜色的容器中：Colors.white。

扑-如何通过使用RepaintBoundary拍摄图像小部件的屏幕截图？

3 个答案: