SfSignautePad to PdfSignatureField

I have a pdf with text and signature fields. When I edit the appearance of the signature field, it doesn't show in the outputted pdf. However, the text fields are updated correctly. I tried using an image from the SfSignaturePad, and I tried the graphics.drawString(), but nothing worked. I found a workaround by drawing onto the page itself using the bounds of the field, but I'd prefer to edit the field directly. Do I need a certificate for this to work? I tried adding an empty .pfx file, but it didn't help.

final signatureImage =
        await signatureKey.currentState!.toImage();
    final byteData =
        await signatureImage.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List signatureBytes = byteData!.buffer.asUint8List();
    final PdfBitmap signatureBitmap = PdfBitmap(signatureBytes);
    PdfSignatureField signatureField = field as PdfSignatureField;

    PdfStandardFont font = PdfStandardFont(PdfFontFamily.helvetica, 15);3
    final PdfGraphics graphics = signatureField.appearance.normal.graphics!;
    graphics.drawImage(signatureBitmap,
        Rect.fromLTWH(0, 0, field.bounds.width, field.bounds.height));
    graphics.drawString("Hello", font);

7 Replies

IJ Irfana Jaffer Sadhik Syncfusion Team February 3, 2025 12:26 PM UTC

Hi Ziad,

This is the expected behavior. The signature field appearance is only visible after signing the document. While text fields can be updated directly, modifying the appearance of a signature field requires signing it with a certificate.

To achieve this, you can use a self-signed PFX certificate and modify the signature field’s appearance as shown below:

// Loads an existing PDF document.

PdfDocument document = PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());

 

// Gets the first signature field of the PDF document.

PdfSignatureField field = document.form.fields[0] as PdfSignatureField;

 

// Creates a digital signature.

field.signature = PdfSignature(

    // Creates a certificate instance from the PFX file with a private key.

    certificate: PdfCertificate(File('PDF.pfx').readAsBytesSync(), 'password123'));

 

// Gets the signature field appearance graphics.

PdfGraphics graphics = field.appearance.normal.graphics;

 

// Draws the signature image.

graphics!.drawImage(

    PdfBitmap(File('image.jpg').readAsBytesSync()), Rect.fromLTWH(0, 0, field.bounds.width, field.bounds.height));

 

// Saves and disposes of the PDF document.

File('Output.pdf').writeAsBytes(await document.save());

document.dispose();

 


Important Note:
The modified appearance will only be visible when the document is signed with a valid PFX certificate.

For more details, please refer to our documentation on Working with Digital Signatures.


Regards,

Irfana J.



IJ Irfana Jaffer Sadhik Syncfusion Team February 3, 2025 12:26 PM UTC

Hi Ziad,

This is the expected behavior. The signature field appearance is only visible after signing the document. While text fields can be updated directly, modifying the appearance of a signature field requires signing it with a certificate.

To achieve this, you can use a self-signed PFX certificate and modify the signature field’s appearance as shown below:

// Loads an existing PDF document.

PdfDocument document = PdfDocument(inputBytes: File('input.pdf').readAsBytesSync());

 

// Gets the first signature field of the PDF document.

PdfSignatureField field = document.form.fields[0] as PdfSignatureField;

 

// Creates a digital signature.

field.signature = PdfSignature(

    // Creates a certificate instance from the PFX file with a private key.

    certificate: PdfCertificate(File('PDF.pfx').readAsBytesSync(), 'password123'));

 

// Gets the signature field appearance graphics.

PdfGraphics graphics = field.appearance.normal.graphics;

 

// Draws the signature image.

graphics!.drawImage(

    PdfBitmap(File('image.jpg').readAsBytesSync()), Rect.fromLTWH(0, 0, field.bounds.width, field.bounds.height));

 

// Saves and disposes of the PDF document.

File('Output.pdf').writeAsBytes(await document.save());

document.dispose();

 


Important Note:
The modified appearance will only be visible when the document is signed with a valid PFX certificate.

For more details, please refer to our documentation on Working with Digital Signatures.


Regards,

Irfana J.



RS Ruthie Smith replied to Irfana Jaffer Sadhik February 12, 2025 04:59 AM UTC

Thank you so much for the information.



WC Wilcox Curtis March 26, 2025 06:33 AM UTC

@hill climb racing Hey there! I totally feel your frustration with the PDF signature field issue—it sounds like a real headache! I’ve run into similar problems before when working with PDFs, and I think I can help shed some light on what’s going on.



IJ Irfana Jaffer Sadhik Syncfusion Team March 27, 2025 09:33 AM UTC

Hi wilcox,


As we have already mentioned, the signature field appearance is only visible after signing the document. While text fields can be updated directly, modifying the appearance of a signature field requires signing it with a certificate - this is the expected behavior.

Could you please share complete details about the issue you are experiencing with the Syncfusion PDF library? This will help us better understand your concern and provide appropriate assistance.


Regards,

Irfana J.



RR Robbins Ralph April 25, 2025 03:57 AM UTC

@level devil  I fully feel your irritation with the PDF signature field issue—it seems like a huge headache! I’ve gone across similar problems before when working with PDFs, and I think I can help shine some light on what’s going on.



IJ Irfana Jaffer Sadhik Syncfusion Team April 25, 2025 07:03 AM UTC

Hi Robbins,

Thank you for reaching out and sharing your experience with the PDF signature field issue. I completely understand how frustrating that can be. Here's what I found useful in addressing the issue:


Check for Software Updates: Ensure that your application is up-to-date. Often, updates contain bug fixes that can resolve signature field problems.


Verify PDF Permissions: Sometimes, the document settings might restrict any edits, including adding signatures. Check if the PDF author has applied such restrictions.


Use a Different PDF Tool: If possible, try using another PDF editor to see if the issue persists. Tools like Adobe Acrobat, Foxit Reader, or even some online PDF services might handle the signature fields differently.


Recreate the Signature Field: If you have access to the original document, try removing and recreating the signature fields. There might have been an issue during their initial setup.


If none of these work, feel free to share more details about the problem you're experiencing, and I'd be happy to help troubleshoot further.


Hope this helps!


Regards,

Irfana J.


Loader.
Up arrow icon