Skip to content

WangShayne/vue-signature

Repository files navigation

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.

About

Electronic signature

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published