简易签名板

安装

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图像）	-