vue-online-signature v1.1.2

vue-online-signature

Canvas 手写签字/签名板

本组件使用vue2.x版本开发，如果使用Vue3.x版本的项目，请使用Vue3.x版本组件，Vue3.x版本请不要使用当前组件，会出现未知BUG

版本提示

1. Vue3.x npm链接 或 npm install vue3-online-signature --save
2. Vue3.x gitee链接 https://gitee.com/awfifnypm/vue3-online-signature

功能

1. 兼容 PC 和 Mobile；
2. 屏幕旋转自适应自定义画布屏幕大小（屏幕旋转后竖屏与横屏数据互通）；
3. 自定义画布尺寸（尺寸可通过获取id元素，幕屏尺寸，自定义宽高），画笔粗细、颜色，画布背景色；
4. 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。
5. 自定义导出图旋转角度
6. 自定义画布背景（支持图片及图片背景重复）
7. 自定义导出图背景（支持图片及图片背景重复，可生成与画布背景不一样背景的图片）
8. 导出图片格式为 base64；
9. 初始化布画恢复历史绘制数据或在已经的画布上恢复历史绘制数据 示例demo

注： 本组件是基于vue-esign插件基础上进行二开和修改，使用方法与vue-esign插件有差异，建议查看本插件文档

安装

npm install vue-online-signature --save

使用

1. 引入 main.js 获vue页面引入

import vueSignature from 'vue-online-signature'
Vue.use(vueEsign) || components: {vueSignature}

2. 页面中使用 必须设置 ref ，用来调用组件内暴露的内置方法 reset() 和 confirm() 自定义的宽度超出屏幕宽度的话，组件样式宽度则是父元素的100%； 组件所有参数都非必填，组件emit出部份内置方法，具体查看下面说明文档

<vueSignature ref="vueSignatureRef" v-bind="params"/>
<button @click="handleReset">清空画板</button> 
<button @click="handleGenerate">生成图片</button>

data () {
  return {
    resultImg: ''.
    params: {
      width: 0,
      height: 0,
      lineWidth: 5,
      lineColor: '',
      canvasBack: '',
      isCrop: false,
      edg: 0,
      fullScreen: true,
      domId: '',
      imgBack: '',
      isRepeat: '',
      noRotation: false,
      backIsCenter: false,
      recoverPoints: []
    }
  }
},
methods: {
  handleReset () {
    this.$refs.vueSignatureRef.reset()
  },
  handleGenerate () {
    this.$refs.vueSignatureRef.confirm().then(res => {
      imagesSRC.value = res.base64
      sessionStorage.setItem('points', JSON.stringify(res.points))
    }).catch(err => {
      alert(err) // 画布没有签字时会执行这里 'Not Signned'
    })
  }
}

3. 说明

两个内置方法，通过给组件设置 ref 调用：

清空画布

this.$refs.vueSignatureRef.reset()

生成图片

this.$refs.vueSignatureRef.confirm().then(res => {
      imagesSRC.value = res.base64
      sessionStorage.setItem('points', JSON.stringify(res.points))
  }).catch(err => {
  alert(err) // 画布没有签字时会执行这里 'Not Signned'
})