web-dev-qa-db-ja.com

Flutter：Canvas / CustomPainterを画像ファイルにどのように保存しますか？

ユーザーから署名を収集して画像に保存しようとしています。画面上に描画できるように十分に作成しましたが、ボタンをクリックして画像に保存し、データベースに保存したいと思います。

これは私がこれまでに持っているものです：

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

そこからどこへ行くべきかわからない...

imagecanvasdartsaveflutter
9
Jus10

CustomPainter で PictureRecorder の出力をキャプチャできます。 PictureRecorder インスタンスを Canvas のコンストラクタに渡します。次に PicturePictureRecorder.endRecording によって返される Image に変換できます- Picture.toImage 。最後に、 Image.toByteData を使用して画像バイトを抽出します。

次に例を示します。 https://github.com/rxlabz/flutter_canvas_to_image

8
jspcal

レンダリングされたメソッドをウィジェットに追加する

_  ui.Image get rendered {
    // [CustomPainter] has its own @canvas to pass our
    // [ui.PictureRecorder] object must be passed to [Canvas]#contructor
    // to capture the Image. This way we can pass @recorder to [Canvas]#contructor
    // using @Painter[SignaturePainter] we can call [SignaturePainter]#Paint
    // with the our newly created @canvas
    ui.PictureRecorder recorder = ui.PictureRecorder();
    Canvas canvas = Canvas(recorder);
    SignaturePainter Painter = SignaturePainter(points: _points);
    var size = context.size;
    Painter.Paint(canvas, size);
    return recorder.endRecording()
        .toImage(size.width.floor(), size.height.floor());
  }
_

次に、状態を使用してレンダリングされた画像を取得します

_var image = signatureKey.currentState.rendered
_

これで、toByteData(format: ui.ImageByteFormat.png)を使用してpng画像を生成し、asInt8List()を使用して保存できます。

_var pngBytes = await image.toByteData(format: ui.ImageByteFormat.png)
File('your-path/filename.png')
    .writeAsBytesSync(pngBytes.buffer.asInt8List())
_

完全な例については、キャンバスをpngとしてエクスポートする方法について、この例を確認してください https://github.com/vemarav/signature

5
Aravind Vemula