Awesome

vue-signature

A electronic signature component by Vue.js

For Vue 3

vue3-signature

Reference and Thanks

signature_pad

API

Props

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

Methods

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.

Events

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.

Usage

npm install vue-signature

A.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>

License

Released under the MIT License.