如何从 Flutter 中的 Canvas 获取 PNG 图像数据？答案

【问题标题】：How to get PNG image data from a Canvas in Flutter?如何从 Flutter 中的 Canvas 获取 PNG 图像数据？
【发布时间】：2018-06-02 11:42:51
【问题描述】：

我有一个 Flutter 小部件，它接受用户输入并使用自定义画家绘制到画布：

class SPPoint {
  final Point point;
  final double size;
  SPPoint(this.point, this.size);
  String toString() => "SPPoint $point $size";
}

class SignaturePadPainter extends CustomPainter {
  final List<SPPoint> allPoints;
  final SignaturePadOptions opts;
  Canvas _lastCanvas;
  Size _lastSize;

  SignaturePadPainter(this.allPoints, this.opts);

  ui.Image getPng() {
    if (_lastCanvas == null) {
      return null;
    }
    if (_lastSize == null) {
      return null;
    }
    var recorder = new ui.PictureRecorder();
    var origin = new Offset(0.0, 0.0);
    var paintBounds = new Rect.fromPoints(_lastSize.topLeft(origin), _lastSize.bottomRight(origin));
    var canvas = new Canvas(recorder, paintBounds);
    paint(canvas, _lastSize);
    var picture = recorder.endRecording();
    return picture.toImage(_lastSize.width.round(), _lastSize.height.round());
  }

  paint(Canvas canvas, Size size) {
    _lastCanvas = canvas;
    _lastSize = size;
    for (var point in this.allPoints) {
      var paint = new Paint()..color = colorFromColorString(opts.penColor);
      paint.strokeWidth = 5.0;
      var path = new Path();
      var offset = new Offset(point.point.x, point.point.y);
      path.moveTo(point.point.x, point.point.y);
      var pointSize = point.size;
      if (pointSize == null || pointSize.isNaN) {
        pointSize = opts.dotSize;
      }

      canvas.drawCircle(offset, pointSize, paint);

      paint.style = PaintingStyle.stroke;
      canvas.drawPath(path, paint);
    }
  }

  bool shouldRepaint(SignaturePadPainter oldDelegate) {
    return true;
  }
}

目前getPng() 返回一个 dart:ui Image 对象，但我不知道如何从图像数据中获取字节（如果这可能的话）

【问题讨论】：

这不是直接可能的，但您可以使用flutterView.getBitmap() 本地实现它，然后在位图中裁剪不需要的数据。然后将位图另存为 png。

标签： dart flutter

【解决方案1】：

这是我想出的解决方案，现在 toByteData() 已添加到 SDK：

var picture = recorder.endRecording();
var image =
    picture.toImage(lastSize.width.round(), lastSize.height.round());
ByteData data = await image.toByteData(format: ui.ImageByteFormat.png);
return data.buffer.asUint8List();

此解决方案正在运行，现已作为 signature_pad_flutter 包的一部分发布到 pub：https://github.com/apptreesoftware/signature-pad-dart/blob/master/signature_pad_flutter/lib/src/painter.dart#L17

【讨论】：