Flutter开发签名应用：PictureRecorder保存Canvas图片为空，PNG保存失败

Hey there! I’ve dealt with exactly this problem while building a signature capture app in Flutter, so let’s walk through what’s likely going wrong and how to fix it.

Common Reasons for a Null Picture from PictureRecorder #

Most often, this happens due to one of these missteps:

• You didn’t specify a valid size when initializing the Canvas tied to the PictureRecorder.
• Your drawing logic isn’t actually rendering anything (e.g., empty signature points, incorrect path construction).
• You’re handling the asynchronous Picture.toImage() call incorrectly, or skipping critical steps in the recording flow.

Step-by-Step Solution #

Let’s build a working implementation for capturing and saving your signature as a PNG.

1. First, Ensure You Have Dependencies

For saving files, add path_provider to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  path_provider: ^2.1.1

2. Working Code to Save the Signature

Assuming you’re collecting signature points in a List<Offset> (e.g., from a GestureDetector on your canvas), here’s a complete save function:

import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

Future<void> saveSignature(List<Offset> signaturePoints, Size canvasSize) async {
  // 1. Initialize PictureRecorder and Canvas with a fixed size
  final recorder = ui.PictureRecorder();
  final canvas = Canvas(
    recorder,
    Rect.fromLTWH(0, 0, canvasSize.width, canvasSize.height),
  );

  // 2. Re-draw your signature on the recorder's canvas
  final signaturePaint = Paint()
    ..color = Colors.black
    ..strokeWidth = 2.5
    ..strokeCap = StrokeCap.round
    ..style = PaintingStyle.stroke;

  if (signaturePoints.isNotEmpty) {
    final path = Path()..moveTo(signaturePoints.first.dx, signaturePoints.first.dy);
    for (var i = 1; i < signaturePoints.length; i++) {
      path.lineTo(signaturePoints[i].dx, signaturePoints[i].dy);
    }
    canvas.drawPath(path, signaturePaint);
  } else {
    print("Error: No signature points to draw!");
    return;
  }

  // 3. End recording and get the Picture
  final picture = recorder.endRecording();
  if (picture == null) {
    print("Error: Picture is null - check canvas size and drawing logic!");
    return;
  }

  // 4. Convert Picture to Image (async - don't skip await!)
  final image = await picture.toImage(
    canvasSize.width.toInt(),
    canvasSize.height.toInt(),
  );
  final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  
  if (byteData == null) {
    print("Error: Failed to convert image to PNG bytes!");
    return;
  }

  // 5. Save the PNG file to device storage
  final appDir = await getApplicationDocumentsDirectory();
  final savePath = "${appDir.path}/user_signature.png";
  await File(savePath).writeAsBytes(byteData.buffer.asUint8List());
  
  print("Signature saved successfully to: $savePath");
}

3. Key Fixes to Note

• Always specify a Canvas size: The Rect.fromLTWH ensures the recorder knows the bounds of your drawing. Without this, the PictureRecorder can’t generate a valid picture.
• Re-draw the signature explicitly: Don’t rely on the on-screen CustomPainter’s canvas – re-render your collected signature points directly to the recorder’s canvas to ensure everything is captured.
• Handle async correctly: picture.toImage() is asynchronous, so you must use await to avoid null values.
• Validate input: Check if your signature points list is empty before attempting to draw – an empty path will result in a blank (or null) picture.

4. Quick Checks for Your Existing Code

• Did you forget to pass a Rect when creating the Canvas for the recorder?
• Are you calling recorder.endRecording() before drawing anything on the canvas?
• Is your CustomPainter using a different canvas than the one tied to your recorder?

Testing the Solution #

Call the saveSignature function when the user taps a "Save" button, passing in your collected signature points and the size of your signature canvas (e.g., Size(300, 150)).

内容的提问来源于stack exchange，提问作者Antonio Machado