A electronic signature component by Vue.js
w,h need units,like 100px or 100%
| name | type | default | description |
|---|---|---|---|
| sigOption | Object | {penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"} | penColor, backgroundColor |
| w | String | "100%" | parent container width |
| h | String | "100%" | parent container height |
| clearOnResize | Boolean | false | Canvas is cleared on window resize |
| waterMark | Object | {} | check Usage addWaterMark |
| disabled | Boolean | false | disabled |
| defaultUrl | String | "" | you want show image by default |
| name | params | description |
|---|---|---|
| save | ()/("image/jpeg")/("image/svg+xml") | save image as PNG/JPEG/SVG |
| clear | clear canvas | |
| isEmpty | Returns true if canvas is empty, otherwise returns false | |
| undo | remove the last dot or line | |
| addWaterMark | {} // check Usage addWaterMark | addWaterMark |
| fromDataURL | (url) | Draws signature image from data URL. |
The components emits the following events:
beginStroke - Triggered before stroke begins.
endStroke - Triggered after stroke ends.
beforeUpdateStroke - Triggered before stroke update.
afterUpdateStroke - Triggered after stroke update.
npm install vue-signatureA.vue
<template> <div id="app"> <vueSignature ref="signature" :sigOption="option" :w="'800px'" :h="'400px'" :disabled="disabled" :defaultUrl="dataUrl" ></vueSignature> <vueSignature ref="signature1" :sigOption="option"></vueSignature> <button @click="save">Save</button> <button @click="clear">Clear</button> <button @click="undo">Undo</button> <button @click="addWaterMark">addWaterMark</button> <button @click="handleDisabled">disabled</button> </div> </template> <script> import vueSignature from "vue-signature"; export default { name: "app", components: { vueSignature, }, data() { return { option: { penColor: "rgb(0, 0, 0)", backgroundColor: "rgb(255,255,255)", }, disabled: false, dataUrl: "https://avatars2.githubusercontent.com/u/17644818?s=460&v=4", }; }, methods: { save() { var _this = this; var png = _this.$refs.signature.save(); var jpeg = _this.$refs.signature.save("image/jpeg"); var svg = _this.$refs.signature.save("image/svg+xml"); console.log(png); console.log(jpeg); console.log(svg); }, clear() { var _this = this; _this.$refs.signature.clear(); }, undo() { var _this = this; _this.$refs.signature.undo(); }, addWaterMark() { var _this = this; _this.$refs.signature.addWaterMark({ text: "mark text", // watermark text, > default '' font: "20px Arial", // mark font, > default '20px sans-serif' style: "all", // fillText and strokeText, 'all'/'stroke'/'fill', > default 'fill fillStyle: "red", // fillcolor, > default '#333' strokeStyle: "blue", // strokecolor, > default '#333' x: 100, // fill positionX, > default 20 y: 200, // fill positionY, > default 20 sx: 100, // stroke positionX, > default 40 sy: 200, // stroke positionY, > default 40 }); }, fromDataURL(url) { var _this = this; _this.$refs.signature.fromDataURL("data:image/png;base64,iVBORw0K..."); }, handleDisabled() { var _this = this; _this.disabled = !_this.disabled; }, }, }; </script>Released under the MIT License.
