0

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

enter image description here

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

enter image description here

ramedju
  • 139
  • 9
  • Normally I use https://pub.dev/packages/easy_signature_pad for capturing the signature. – Sujan Gainju Apr 13 '23 at 11:25
  • @SujanGainju Thanks for this one, but seems the result is not what I'm expecting. `[137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 1, 144, 0, 0, 1, 0, 8, 6, 0, 0, 0, 157, 217, 32, 143, 0, 0, 0, 1, 115, 82,.....` I'm expecting it to like my sampe result above `iVBORw0KGgoAAAANSUhEUgAABJsAAAeuCAYAAAB.....` How can I achieve it? – ramedju Apr 13 '23 at 13:04
  • @SujanGainju The result is also as the same above, it's not capturing the data in the whole pad. – ramedju Apr 13 '23 at 13:05

0 Answers0