我正在尝试从用户那里收集签名并将其保存到图像。我已经做得足够远,可以在屏幕上绘制了,但是现在我想单击一个按钮以保存到图像并存储在数据库中。
这是我到目前为止的内容:
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; }
不知道从那里去哪里…
您可以捕获的输出CustomPainter用PictureRecorder。将PictureRecorder实例传递给的构造函数Canvas。在Picture通过返回PictureRecorder.endRecording然后可以转化为Image与Picture.toImage。最后,使用提取图像字节Image.toByteData。
CustomPainter
PictureRecorder
Canvas
Picture
PictureRecorder.endRecording
Image
Picture.toImage
Image.toByteData
这是一个示例:https : //github.com/rxlabz/flutter_canvas_to_image