flutter - 如何从自定义画图保存图像？

Question

我正在尝试制作一个简单的应用程序，该应用程序根据用户的输入进行绘制。制作基本功能，我遇到了问题，我无法保存图像。我搜索并发现我应该使用PictureRecorder()，但我无法使它工作(我的错不是错误)。所以我想问你我应该如何实现PictureRecorder并使用Custom Paint将图像保存到磁盘。

这是代码:

import 'package:flutter/services.dart';
import 'dart:ui' as ui;

class Painter extends StatefulWidget {
  static String id = 'Painter';
  @override
  _PainterState createState() => _PainterState();
}

class _PainterState extends State<Painter> {
  final recorder = new ui.PictureRecorder();
  double canvasWidth = 1200;
  double canvasHeight = 1000;
  double SecondWidth = 0;
  double SecondHeight = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      appBar: AppBar(
        title: Center(
          child: Text(
            '⚡  ⚡',
            style: TextStyle(color: Colors.blue),
          ),
        ),
        backgroundColor: Colors.black26,
      ),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(10.0),
          child: ListView(
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('⚡  ⚡'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none, hintText: 'title'),
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Canvas  Height'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          onChanged: (value) {
                            setState(() {
                              canvasHeight = double.parse(value);
                            });
                          },
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Canvas. Height'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Canvas. Width'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          onChanged: (value) {
                            setState(() {
                              canvasWidth = double.parse(value);
                            });
                            print(canvasWidth);
                          },
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Canvas. Width'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Second. height'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Second. height'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                          onChanged: (value) {
                            setState(() {
                              SecondHeight = double.parse(value);
                            });
                          },
                        ),
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('Secon. width'),
                      SizedBox(
                        width: 150.0,
                        child: TextField(
                          decoration: InputDecoration(
                              border: InputBorder.none,
                              hintText: 'Second. Width'),
                          inputFormatters: [
                            WhitelistingTextInputFormatter.digitsOnly
                          ],
                          keyboardType: TextInputType.number,
                          onChanged: (value) {
                            setState(() {
                              SecondWidth = double.parse(value);
                            });
                          },
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              RaisedButton(
                onPressed: () async {
                  final picture = recorder.endRecording();
                  final img = picture.toImage(200, 200);
                  final pngBytes = await img.toByteData(format: new ui.EncodingFormat.png());
                },
                child: Text('Save Image'),
              ),
              FittedBox(
                child: SizedBox(
                  width: canvasWidth,
                  height: canvasHeight,
                  child: Container(
                    color: Colors.yellow,
                    child: CustomPaint(
                      painter: BoxInABox(
                        canvasrecorder: recorder,
                        width: canvasWidth,
                        height: canvasHeight,
                        iHeight: SecondHeight,
                        iWidth: SecondWidth,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class BoxInABox extends CustomPainter {
  @override
  BoxInABox({this.width, this.height, this.iWidth, this.iHeight, this.canvasrecorder});

  final double width;
  final double height;
  final double iWidth;
  final double iHeight;
  final canvasrecorder;

  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0
      ..color = Colors.indigo;

    canvas.drawRect(
        Rect.fromCenter(
          height: height,
          width: width,
          center: Offset(
            width / 2,
            height / 2,
          ),
        ),
        Paint()..color = Colors.green);

    canvas.drawRect(
        Rect.fromCenter(
          height: iHeight,
          width: iWidth,
          center: Offset(
            width / 2,
            height / 2,
          ),
        ),
        Paint()..color = Colors.red);
  }

  @override
  bool shouldRepaint(BoxInABox oldDelegate) => true;
}

提前致谢

编辑:更新了代码，包括我尝试实现记录器失败，P.s 它给了我一个关于“错误”的错误:

The method 'toByteData' isn't defined for the class 'Future'. (undefined_method at [flutterappquesion] lib\main.dart:152)' and error: Undefined class 'ui.EncodingFormat'. (undefined_class at [flutterappquesion] lib\main.dart:152)

Answer 1

只需使用 PictureRecorder在您的 Canvas .

PictureRecorder pictureRecorder = PictureRecorder();
Canvas canvas = Canvas(pictureRecorder);

// Paint your canvas as you want

Picture picture = pictureRecorder.endRecording();
Image image = await picture.toImage(yourWidth, yourHeight);