Signature Pad help

help
1

Hello,

I found this great package for signatures but there is lack of documentation for meteor projects.

Has anyone worked already with this? I managed to setup a canvas but I am trying to set up a folder on the client side, saving and editing signature images based on profile id number.

If there is an example meteor project using Signature Pad to share that would be awesome.

Thanks in advance, George.

2

I’d recommend CFS for this: https://github.com/CollectionFS/Meteor-CollectionFS

From their docs:

The insert method can directly accept a variety of different file representations as its first argument:
…

  • A data URI string
    …

And your signature library can turn the canvas into a data uri:

signaturePad.toDataURL();

From there just link the dots :smile: Let me know if you need more help.

2 Likes
3

Hi,

I’m really struggling with this and wonder if anyone can help.

I am creating a simple app that requires a user signature. I would like to store the captured signature and then retrieve the url/data and display the image in another part of the app. Eventually I want to add more information with the image upload but I’m just trying to get the signature working first.

I have the following packages installed:

• CollectionFS

• GridFS

• SignaturePad

I also have a collection called Signatures and the following Meteor code so far:

Template.signin.events({
'click [data-action=save]': function(e) {
    e.preventDefault();

    if (signaturePad.isEmpty()) {
        alert('Please provide signature first');
    } else {
        var file = signaturePad.toDataURL();

        Signatures.insert(file);
    }
}
});

I have the following HTML in my template:

<template name="signin">
<div id="signature-pad" class="m-signature-pad row">
    <div class="m-signature-pad--body col-md-12">
        <canvas></canvas>
    </div>
    <div class="m-signature-pad--footer col-md-12">
        <div class="description">Sign above</div>
        <button class="btn btn-primary" data-action="clear">Clear</button>
        <button class="btn btn-default" data-action="save">Save</button>
    </div>
</div>
</template>

This is saving a record to Mongo but I cannot see a reference to the link/image string anywhere, here’s what I see in the Chrome Inspector:

_id: "NowB4cZBckgE92rY3"
collectionName: "signatures"
copies: Object
signatures: Object
createdAt: Wed Nov 04 2015 13:37:36 GMT+0000 (GMT)
key: "563a0a201b3eb0cb0431f472"
name: null
size: 19089
type: "image/png"
updatedAt: Wed Nov 04 2015 13:37:36 GMT+0000 (GMT)
__proto__: Object
__proto__: Object
createdByTransform: true
original: Object
uploadedAt: Wed Nov 04 2015 13:37:36 GMT+0000 (GMT)
__proto__: EventEmitter

Please can anyone help point me in the right direction? Many thanks in advance.

4

Try a find on that collection. CollectionFS abstracts a lot so just use the normal ways to get data. Logging it does not show the real thing most of the time.

5

Hi, our company really needs help integrating signature_pad into our meteor, reactjs, bootstrap application… Our company name is Controlled Efficiencies and we would like to contract you out. Please let me know if you are interested and I can elaborate more on the specs. Thanks in advance.