Vue component wrap for signature pad
$ npm i vue-signature-canvas
import Vue from 'vue';
import VueSignatureCanvas from 'vue-signature-canvas';
Vue.use(VueSignatureCanvas);
<template>
<div id="app">
<VueSignatureCanvas
ref="handWrite"
:canvasProps="{class: 'sig-canvas'}"
/>
</div>
</template>
<script>
import VueSignatureCanvas from "VueSignatureCanvas";
export default {
name: 'FirstSignatureCanvas',
methods: {
},
components: {
VueSignatureCanvas
}
};
</script>
<style lang="less" scoped>
.sig-canvas {
width: 100%;
height: 100%;
background-color: rgba(244,244,244,0);
position: fixed;
z-index: 9;
}
</style>
The props of SignatureCanvas mainly control the properties of the pen stroke used in drawing. All props are optional.
velocityFilterWeight
:number
, default:0.7
minWidth
:number
, default:0.5
maxWidth
:number
, default:2.5
minDistance
:number
, default:5
dotSize
:number
orfunction
, default:() => (this.minWidth + this.maxWidth) / 2
penColor
:string
, default:'black'
throttle
:number
, default:16
There are also two callbacks that will be called when a stroke ends and one begins, respectively.
onEnd
:function
onBegin
:function
Additional props are used to control the canvas element.
canvasProps
:object
- directly passed to the underlying
<canvas />
element
- directly passed to the underlying
backgroundColor
:string
, default:'rgba(0,0,0,0)'
- used in the API's
clear
convenience method (which itself is called internally during resizes)
- used in the API's
clearOnResize
:bool
, default:true
- whether or not the canvas should be cleared when the window resizes
Of these props, all, except for canvasProps
and clearOnResize
, are passed through to signature_pad
as its options.
signature_pad
's internal state is automatically kept in sync with prop updates for you (via a componentDidUpdate
hook).
All API methods require a ref to the SignatureCanvas in order to use and are instance methods of the ref.
isEmpty()
:boolean
, self-explanatoryclear()
:void
, clears the canvas using thebackgroundColor
propfromDataURL(base64String, options)
:void
, writes a base64 image to canvastoDataURL(mimetype, encoderOptions)
:base64string
, returns the signature image as a data URLfromData(pointGroupArray)
:void
, draws signature image from an array of point groupstoData()
:pointGroupArray
, returns signature image as an array of point groupsoff()
:void
, unbinds all event handlerson()
:void
, rebinds all event handlersgetCanvas()
:canvas
, returns the underlying canvas ref. Allows you to modify the canvas however you want or call methods such astoDataURL()
getTrimmedCanvas()
:canvas
, creates a copy of the canvas and returns a trimmed version of it, with all whitespace removed.getSignaturePad()
:SignaturePad
, returns the underlying SignaturePad reference.
The API methods are mostly just wrappers around signature_pad
's API.
on()
and off()
will, in addition, bind/unbind the window resize event handler.
getCanvas()
, getTrimmedCanvas()
, and getSignaturePad()
are new.
szimek/signature_pad - HTML5 canvas based smooth signature drawing
neighborhood999/vue-signature-pad - Vue Signature Pad Component
agilgur5/react-signature-canvas - React Signature Canvas Component
MIT © Sky