Flutter：如何将Canvas / CustomPainter保存到图像文件？ [英] Flutter: How would one save a Canvas/CustomPainter to an image file?

问题描述

我正在尝试从用户那里收集签名并将其保存到图像中。我已经做得足够远，可以在屏幕上绘画，但是现在我想单击一个按钮以保存到图像并存储在数据库中。

I am trying to collect a signature from the user and save it to an image. I have made it far enough that I can draw on the screen, but now I'd like to click a button to save to an image and store in my database.

到目前为止，这就是我所拥有的：

This is what I have so far:

import 'package:flutter/material.dart';

class SignaturePadPage extends StatefulWidget {
  SignaturePadPage({Key key}) : super(key: key);

  @override
  _SignaturePadPage createState() => new _SignaturePadPage();
}
class _SignaturePadPage extends State<SignaturePadPage> {

  List<Offset> _points = <Offset>[];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: GestureDetector(
        onPanUpdate: (DragUpdateDetails details) {
          setState(() {
            RenderBox referenceBox = context.findRenderObject();
            Offset localPosition =
            referenceBox.globalToLocal(details.globalPosition);
            _points = new List.from(_points)..add(localPosition);
          });
        },
        onPanEnd: (DragEndDetails details) => _points.add(null),
        child: new CustomPaint(painter: new SignaturePainter(_points)),
      ),
    );
  }
}

class SignaturePainter extends CustomPainter {
  SignaturePainter(this.points);
  final List<Offset> points;
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = Colors.black
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 5.0;
    for (int i = 0; i < points.length - 1; i++) {
      if (points[i] != null && points[i + 1] != null)
        canvas.drawLine(points[i], points[i + 1], paint);
    }
  }
  bool shouldRepaint(SignaturePainter other) => other.points != points;
}

不确定从那里去哪里...

Not sure where to go from there...

推荐答案

您可以捕获 CustomPainter 与 PictureRecorder 。传递您的 PictureRecorder 您的 Canvas 。 图片 由 PictureRecorder.endRecording 转换为 图片 和 Picture.toImage 。最后，使用 Image.toByteData 。

You can capture the output of a CustomPainter with PictureRecorder. Pass your PictureRecorder instance to the constructor for your Canvas. The Picture returned by PictureRecorder.endRecording can then be converted to an Image with Picture.toImage. Finally, extract the image bytes using Image.toByteData.

这里是一个示例： https://github.com/rxlabz/flutter_canvas_to_image

这篇关于Flutter：如何将Canvas / CustomPainter保存到图像文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！