Flutter中如何从签名板获取Base64字符串并直接发送至REST API

问题概述 #

你使用easy_signature_pad: ^1.0.6、syncfusion_flutter_signaturepad 23.2.7、signature: ^5.4.1三个签名包，转换签名为Base64后得到的图像不完整，需要直接生成data:image/png;base64,...格式的字符串发送至API，无需保存到临时文件。

各签名包的解决方案 #

1. syncfusion_flutter_signaturepad #

该包可直接获取签名的Uint8List，无需多余转换：

// 定义签名板控制器
final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();

// 获取签名并转成目标格式Base64
Future<String> getSyncfusionSignatureBase64() async {
  Uint8List? signatureBytes = await _signaturePadKey.currentState?.toImage(pixelRatio: 3.0);
  if (signatureBytes == null) return '';
  
  String base64String = base64Encode(signatureBytes);
  return 'data:image/png;base64,$base64String';
}

pixelRatio控制图像清晰度，数值越高图像越清晰，可按需调整。

2. signature: ^5.4.1 #

通过控制器直接导出签名为Uint8List：

// 初始化签名控制器
final SignatureController _controller = SignatureController(
  penStrokeWidth: 2,
  penColor: Colors.black,
  exportBackgroundColor: Colors.white,
);

// 生成目标格式Base64
String getSignaturePackageBase64() {
  Uint8List signatureBytes = _controller.toPngBytes() ?? Uint8List(0);
  if (signatureBytes.isEmpty) return '';
  
  String base64String = base64Encode(signatureBytes);
  return 'data:image/png;base64,$base64String';
}

exportBackgroundColor可设置导出图像的背景色，避免透明背景导致的显示异常。

3. easy_signature_pad: ^1.0.6 #

该包的回调直接返回纯图像Base64字符串，只需拼接头部即可：

// 在组件中设置回调处理签名数据
EasySignaturePad(
  onSigned: (String base64) {
    // 直接拼接头部生成目标格式
    String fullBase64 = 'data:image/png;base64,$base64';
    // 此处可直接将fullBase64发送至API
  },
  onClear: () {
    // 清空签名逻辑
  },
)

你之前的setImage方法存在逻辑错误：将回调返回的Base64解码后重新编码，会导致数据损坏，直接使用回调返回的原始Base64拼接头部即可。

通用注意事项 #

• 避免对签名数据进行无意义的解码再编码操作，防止数据丢失或损坏。
• 获取签名数据时设置合适的像素比例，避免生成的图像模糊、不完整。
• 生成目标格式Base64后，可直接作为参数发送至REST API，无需保存到本地文件。

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