Persist Ink Signatures across Instances

Ink signatures aren’t automatically persisted in memory by PSPDFKit for Web. This is something that needs to be implemented.

One possibility is to store the ink signatures on the browser local storage and populate the list of ink signatures when an instance of PSPDFKit is loaded. To retrieve the ink signatures, you can use PSPDFKit.Instance#getInkSignatures and populate the list when it’s loading with the PSPDFKit.Configuration#populateInkSignatures property:

const serializedSignatures = localStorage.getItem(
  "signaturesSerialized"
);
const configuration = defaultConfiguration; // Replace this with your configuration options.

if (serializedSignatures) {
  const parsed = JSON.parse(serializedSignatures);
  const list = PSPDFKit.Immutable.List(
    parsed.map(PSPDFKit.Annotations.fromSerializableObject)
  );
  configuration.populateInkSignatures = () => list;
}

PSPDFKit.load(configuration).then((instance) => {
  console.log("PSPDFKit for Web successfully loaded!!", instance);

  // We listen to any change creation/update/deletion of ink signatures.
  instance.addEventListener("inkSignatures.change", async () => {
    const list = await instance.getInkSignatures();
    const serialized = list
      .map(PSPDFKit.Annotations.toSerializableObject)
      .toJS();
    localStorage.setItem(
      "signaturesSerialized",
      JSON.stringify(serialized)
    );
  });
  return instance;
});

You can enhance this further by, for instance, sending the serialized list of ink signatures to a server instead of keeping it persisted in the client’s storage. Refer to our guide on storing signatures to learn more.

This has been tested with PSPDFKit for Web 2020.2.5.