How to use signature_pad - 10 common examples

To help you get started, we’ve selected a few signature_pad examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github enketo / enketo-core / src / widget / draw / draw-widget.js View on Github external
.then( () => {
                that.pad = new SignaturePad( canvas, {
                    onEnd: () => {
                        // keep replacing this timer so continuous drawing
                        // doesn't update the value after every stroke.
                        clearTimeout( that._updateWithDelay );
                        that._updateWithDelay = setTimeout( that._updateValue.bind( that ), DELAY );
                    },
                    penColor: that.props.colors[ 0 ] || 'black'
                } );
                that.pad.off();
                if ( existingFilename ) {
                    that.element.value = existingFilename;
                    return that._loadFileIntoPad( existingFilename )
                        .then( that._updateDownloadLink.bind( that ) );
                }
                return true;
            } );
github Mobsites / Blazor.SignaturePad / src / app.js View on Github external
constructor(dotNetObjRef, elemRefs, options) {
        super(elemRefs.canvas, { penColor: options.color ? options.color : null });
        this.dotNetObjRef = dotNetObjRef;
        this.elemRefs = elemRefs;
        this.dotNetObjOptions = options;
        // Create a second Signature Pad just to help preserve signature when saving.
        const canvas = document.createElement('canvas');
        canvas.width = options.maxWidth;
        canvas.height = options.maxHeight;
        this.fullSignaturePad = new SignaturePad(canvas);
        this.onEnd = function () {
            this.dotNetObjRef.invokeMethodAsync('SignatureChanged');
        };
    }
    resizeCanvas() {
github formio / formio.js / src / components / signature / Signature.js View on Github external
attach(element) {
    this.loadRefs(element, { canvas: 'single', refresh: 'single', padBody: 'single', signatureImage: 'single' });
    const superAttach = super.attach(element);

    this.onDisabled();
    // Create the signature pad.
    if (this.refs.canvas) {
      this.signaturePad = new SignaturePad(this.refs.canvas, {
        minWidth: this.component.minWidth,
        maxWidth: this.component.maxWidth,
        penColor: this.component.penColor,
        backgroundColor: this.component.backgroundColor
      });

      this.signaturePad.onEnd = () => this.setValue(this.signaturePad.toDataURL(), {
        noSign: true
      });
      this.refs.signatureImage.setAttribute('src', this.signaturePad.toDataURL());

      // Ensure the signature is always the size of its container.
      if (this.refs.padBody) {
        this.addEventListener(window, 'resize', _.debounce(() => this.checkSize(), 100));
        setTimeout(function checkWidth() {
          if (this.refs.padBody && this.refs.padBody.offsetWidth) {
github Tangerine-Community / tangy-form / input / tangy-signature.js View on Github external
ready() {
   super.ready();
   this.t = {
     accept: t('accept'),
     clear: t('clear')
   }
   const canvas = this.shadowRoot.querySelector("#signature-pad-canvas");
   this.signaturePad = new SignaturePad(canvas, {
     backgroundColor: 'rgb(255, 255, 255)'
   });
   this.shadowRoot.querySelector('.hint-text').innerHTML = this.hasAttribute('hint-text') 
    ? this.getAttribute('hint-text')
    : ''
  }
github michaeldzjap / react-signature-pad-wrapper / src / SignaturePad.js View on Github external
componentDidMount() {
        if (this._canvas) {
            if (!this.props.width || !this.props.height) {
                this._canvas.style.width = '100%';
            }
            this.scaleCanvas();

            if (!this.props.width || !this.props.height) {
                window.addEventListener('resize', this._callResizeHandler);
            }

            this._signaturePad = new SigPad(this._canvas, this.props.options);
        }
    }
github wix / wix-ui / packages / wix-ui-core / src / components / signature-input / signing-pad / SigningPad.tsx View on Github external
initSignaturePad = () => {
    const {
      setSignaturePadContext,
      penColor,
      penWidth,
      onDrawStart,
      onDraw,
      disabled,
    } = this.props;

    this.signaturePad = new SignaturePad(this.canvasEl, {
      penColor: calculatePenColor(penColor),
      onBegin: this.invokeIfDefined(onDrawStart),
      onEnd: this.invokeIfDefined(onDraw),
      ...transformPenSizeToWidths(penWidth),
    });

    setSignaturePadContext({
      clear: () => {
        this.signaturePad.clear();
        this.setState(clearA11yValue);
      },
    });

    if (disabled) {
      this.signaturePad.off();
    }
github surveyjs / widgets / src / signature_pad.js View on Github external
afterRender: function(question, el) {
      var rootWidget = this;
      var canvas = el.getElementsByTagName("canvas")[0];
      var buttonEl = el.getElementsByTagName("button")[0];
      var signaturePad = new SignaturePad(canvas);
      if (question.isReadOnly) {
        signaturePad.off();
      }

      buttonEl.onclick = function() {
        question.value = undefined;
      };

      question.readOnlyChangedCallback = function() {
        if (!question.allowClear || question.isReadOnly) {
          signaturePad.off();
          buttonEl.style.display = "none";
        } else {
          signaturePad.on();
          buttonEl.style.display = "block";
        }
github wix / wix-ui / packages / wix-ui-core / src / components / signature-input / SignatureInput.tsx View on Github external
componentDidMount() {
    this.signaturePad = new SignaturePad(this.canvas);
  }
github enketo / enketo-core / src / widget / draw / draw-widget.js View on Github external
import dialog from 'enketo/dialog';
import { updateDownloadLink, dataUriToBlobSync, getFilename } from '../../js/utils';
const DELAY = 1500;

/**
 * SignaturePad.prototype.fromDataURL is asynchronous and does not return
 * a Promise. This is a rewrite returning a promise and the objectUrl.
 * In addition it also fixes a bug where a loaded image is stretched to fit
 * the canvas.
 *
 * @function external:SignaturePad#fromObjectURL
 * @param {*} objectUrl
 * @param {*} options
 * @return {Promise}
 */
SignaturePad.prototype.fromObjectURL = function( objectUrl, options ) {
    const image = new Image();
    options = options || {};
    const deviceRatio = options.ratio || window.devicePixelRatio || 1;
    const width = options.width || ( this._canvas.width / deviceRatio );
    const height = options.height || ( this._canvas.height / deviceRatio );
    const that = this;

    this._reset();

    return new Promise( resolve => {
        image.src = objectUrl;
        image.onload = () => {
            const imgWidth = image.width;
            const imgHeight = image.height;
            const hRatio = width / imgWidth;
            const vRatio = height / imgHeight;
github enketo / enketo-core / src / widget / draw / draw-widget.js View on Github external
that._ctx.drawImage( image, left, top, imgWidth, imgHeight );
            }
            resolve( objectUrl );
        };
        that._isEmpty = false;
    } );
};

/**
 * Similar to SignaturePad.prototype.fromData except that it doesn't clear the canvas.
 * This is to facilitate undoing a drawing stroke over a background (bitmap) image.
 *
 * @function external:SignaturePad#updateData
 * @param {*} pointGroups
 */
SignaturePad.prototype.updateData = function( pointGroups ) {
    const that = this;
    this._fromData(
        pointGroups,
        ( curve, widths ) => { that._drawCurve( curve, widths.start, widths.end ); },
        rawPoint => { that._drawDot( rawPoint ); }
    );

    this._data = pointGroups;
};

/**
 * Widget to obtain user-provided drawings or signature.
 *
 * @extends Widget
 */
class DrawWidget extends Widget {

signature_pad

Library for drawing smooth signatures.

MIT
Latest version published 26 days ago

Package Health Score

85 / 100
Full package analysis