1、安装
npm install vue-esign --save
2、引入
// main.js
import vueEsign from 'vue-esign'
Vue.use(vueEsign)
3、参数
| 属性 |
说明 |
类型 |
默认值 |
| width |
画布宽度，即导出图片的宽度 |
Number |
800 |
| height |
画布高度，即导出图片的高度 |
Number |
300 |
| lineWidth |
画笔粗细 |
Number |
4 |
| lineColor |
画笔颜色 |
String |
#000 |
| bgColor |
画布背景色，为空时画布背景透明 |
String |
- |
| isCrop |
是否裁剪，在画布设定尺寸基础上裁掉四周空白部分 |
Boolean |
false |
| isClearBgColor |
清空画布时(reset)是否同时清空设置的背景色(bgColor) |
Boolean |
true |
| format |
生成图片格式 image/jpeg(jpg格式下生成的图片透明背景会变黑色请慎用或指定背景色)、 image/webp |
Number |
image/png |
| quality |
生成图片质量；在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略 |
Number |
1 |
4、完整代码
<template>
<div class="content">
<el-button @click="handleClear">清空</el-button>
<el-button @click="handleSubmit">提交</el-button>
<vue-esign ref="esign" :width="600" :height="300" :lineWidth="6"
bgColor="#e6f7ff" :isClearBgColor="false" />
</div>
</template>
<script>
export default {
name: 'test',
methods: {
// 清空画布
handleClear() {
this.$refs.esign.reset()
},
// 生成图片提交
async handleSubmit() {
let base64Url = await this.getSignUrl(this.$refs.esign)
if (!base64Url) {
return this.$message.warning('请先签字')
}
// todo提交表单
this.$message.success('提交成功')
},
// 签字转为base64图片
getSignUrl(refs) {
return new Promise((resolve, reject) => {
refs.generate().then(res => {
resolve(res)
}).catch(err => {
resolve('')
})
})
}
}
}
</script>
<style lang="scss" scoped>
</style>