I'm trying to convert user's signature to base64 encoding using the syncfusion_flutter_signaturepad
package but I'm not able to convert it successfully. When I try to test it, it's just a blank page and the signature was not there.
Here's what I have so far :
import 'dart:async';
import 'dart:convert';
import 'package:image/image.dart' as image;
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_signaturepad/signaturepad.dart';
class _SignaturePadState extends State<SignaturePad> {
GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();
bool _isSignatureEmpty = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Input Signature'),
automaticallyImplyLeading: false,
),
body: Column(
children: <Widget>[
Expanded(
child: SfSignaturePad(
key: _signaturePadKey,
backgroundColor: Colors.white,
onDrawStart: () {
setState(() {
_isSignatureEmpty = false;
});
return false;
},
onDrawEnd: () {
setState(() {
});
},
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
ElevatedButton(
onPressed: () async {
if (_isSignatureEmpty) {
return;
}
// works but not displaying captured image
ui.Image signatureData =
await _signaturePadKey.currentState!.toImage();
ByteData? byteData = await signatureData.toByteData(
format: ui.ImageByteFormat.png);
String imageEncoded = "data:image/png;base64," +
base64.encode(byteData!.buffer.asUint8List());
print("Encoded: $imageEncoded");
},
child: Text('Save'.toUpperCase()),
style: ElevatedButton.styleFrom(
backgroundColor: Theme.of(context).primaryColor,
),
),
// other buttons
],
),
],
),
);
}
}
Printed result for that one is:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYkAAAKQCAYAAABq7IZzAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAACAASURBVHic7d3NXRtn/+jhn88ne0EFEhUgKpBYnSVQgaQKEBVYVICowEMFGZYnG8YVeFwB4wqYVKCzcEaPHfuOAQuNXq5r9U/il4nz/PXV/TrvFovFIgDgR3/9n7afAIDNJRIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCSSACQJBIAJIkEAEkiAUCS
And when I try to test it, it just returned an empty space, like the signature is not there.
PS: Added border and text so that result is emphasized
Can someone help me point where I'm missing something?
EDIT
I tried to test again and it seems that it's only capturing the top part of the signature pad.
CONVERTED DATA
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABJsAAAeuCAYAAABUqDKeAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAACAASURBVHic7N1PTBtpvjf6X/lfAenyLGDz2r4Sng3gq5fpRSLQpU+kIIESneiwgEQalMUls5jM5mUVVmFFVmFFNhMWN/Qik0g3MFJaHR0Eo0TqHFrkhcUMLTmwGbJwmMV1FqfcAcrYrrtwCuxy/XmqXLbLVd+PdDSnE5IYU656nt/z+8PJsiwTQB2uPvtCmZz+ZRQXOHp351ITXxHR6v4Zzb2VmL42ynP0461OSgiBBr+q5ljaydPSbl739we6A/T6dpfu72dyJbr58oREyfzW8Pe7lyjKc7ZeZ7tIZ0t08+Wx7u9P9oVocbSjia/Iu94fFYmofM9w6+fxj/95SpsfC4ZfM3s5QrNXIuf/beV+pOWff/rG9p9tpIUtiVb2zur6O9TvVTOIkkzfPv1i+DUPRni6Oxhu0isqu//mlNYOqq+tVrwOADBntNZ6PtFJw7EgEZXXEPffnNKHz6Xz308IHP3U5HWx1v3FSOX3oKh8lrVibQ8Abedbd67moW1kciXDQBMR1TysmmE8GWL+WlGSaW2f/QHc7sw2dmv7BaZAExFRumLx5FWpngCN9epfT5sfi8zvF5SJkkzvj4q0tFterN9bP6Vvn36h3786od+/OqGrz47p26df6N76KW0eFiiddc91luqx/tic6g9TXLAXlBUi7g3mjlm4z2qJC1zTA01ExBQgf7ybb+rnevuoSJsfi1W/Fhc4Gk82//kJAObWDrQD7UKEq1r3pnoCNKMKGGdyMt1bP23qPWZxtKPmdVj1t4p71PL1znpfEgD4QH0rRfA9liDNZH/zT2WjPEcD3YGqkyQjS7v5lmx6GiGTM/6ejTJGREk2zdqo1IpAYivM/C6s+76IkkwbhwWaasF13m5W9s5o87BA20dF069V3teNw4v3fWYw