简易签名板

安装

npm i easy-sign-draw

全局引入

// main.js
import draw from 'easy-sign-draw'
Vue.use(draw)

局部引入

// .vue
import draw from 'easy-sign-draw'
export default {
  components: { draw }
}

使用

<!-- template -->
<draw ref="myDraw"></draw>

// JavaScript(vue)
var base64 = this.$refs.myDraw.getImage() //获取画板内容
this.$refs.myDraw.clean() //清空画板
this.$refs.myDraw.reset() //重新获取画板信息

参数

| 参数名 | 描述 | 类型 | 默认值 | | ---------- | ------------------------------------------------------ | ------- | --------- | | id | 画板的id（单页多次使用组件导致重复id时，可更改此参数） | String | "my-draw" | | isFull | 是否截取完整图像（默认只截取有内容的部分） | Boolean | false | | border | 是否让画板自带边框（1像素#ddd） | Boolean | false | | background | 画板背景颜色，为空或“none”时不设置背景色 | String | "" | | color | 画笔颜色 | String | "#000" | | size | 画笔粗细 | Number | 3 | | smooth | 是否开启画笔粗细随速度改变 | Boolean | false |

事件

| 事件名 | 说明 | 参数 | | ------ | ------------------------------------------------------------ | ------------------ | | init | 初始化画板完成后触发的事件（返回两个参数，第一个是画板，第二个是画板的剪切版，仅在isFull关闭时有效） | canvas，clipCanvas |

方法

| 方法名 | 说明 | 参数 | | -------- | ------------------------------------------------------------ | ---- | | reset | 重置画板对象（为防止窗口大小改变但页面不刷新情况，使用此方法重新获取画板对象，同时会再次触发init事件） | - | | clean | 清空画板 | - | | getImage | 获取画板图像（返回一个base64图像） | - |