vue-canvas-signature
Canvas 手写签字 手写签名 电子签名
功能
- 兼容 PC 和 Mobile;
- 画布自适应屏幕大小变化(窗口缩放、屏幕旋转时画布无需重置,自动校正坐标);
- 自定义画布尺寸(导出图尺寸),画笔粗细、颜色,画布背景色;
- 支持裁剪 (针对需求:有的签字需要裁剪掉四周空白)。
- 导出图片格式为
base64
; - 支持缩放倍数
安装
npm install vue-canvas-signature --save
使用
- main.js 中引入
import vueSignature from 'vue-canvas-signature'
createApp(App).use(vueSignature).mount('#app')
- 页面中使用
必须设置
ref
,用来调用组件的四个内置方法reset()
、generate()
、transformScaleRatio()
和restoreScaleRatio()
无需给组件设置 style
的宽高,如果画布的 signWidth
属性值没超出父元素的样式宽度,则该组件的样式宽度就是画布宽度,超出的话,组件样式宽度则是父元素的100%; 所以只需设置好父元素的宽度即可;
<vue-signature
ref="signature"
:signWidth="width"
:signHeight="height"
:isCrop="isCrop"
:scaleRatio="2"
:signLineWidth="lineWidth"
:signLineColor="lineColor"
v-model="bgColor"
/>
<button @click="handleReset">清空画板</button>
<button @click="handleGenerate">生成Base64图片</button>
<button @click="handleHorizontal">横屏(放大倍数)</button>
<button @click="handleNotHorizontal">竖屏(恢复)</button>
data() {
return {
lineWidth: 6,
lineColor: "#000000",
bgColor: "",
resultImg: "",
isCrop: false,
width:400,
height: 300,
};
},
methods: {
handleReset() {
this.$refs.signature.reset();
},
handleGenerate() {
this.$refs.signature
.generate()
.then((res) => {
this.resultImg = res;
})
.catch((err) => {
alert(err); // 画布没有签字时会执行这里 'Not Signned'
});
},
handleHorizontal(){
this.$refs.signature.transformScaleRatio()
},
handleNotHorizontal(){
this.$refs.signature.restoreScaleRatio()
},
}
- 说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
signWidth | Number | 800 | 画布宽度,即导出图片的宽度 |
signHeight | Number | 300 | 画布高度,即导出图片的高度 |
signLineWidth | 4 | Number | 画笔粗细 |
signLineColor | String | #000000 | 画笔颜色 |
scaleRatio | Number | 1 | 放大的倍数 |
bgColor | String | 空 | 画布背景色,为空时画布背景透明, 支持多种格式 '#ccc','#E5A1A1','rgb(229, 161, 161)','rgba(0,0,0,.6)','red' |
isCrop | Boolean | false | 是否裁剪,在画布设定尺寸基础上裁掉四周空白部分 |
四个内置方法,通过给组件设置 ref
调用:
清空画布
this.$refs.signature.reset()
生成图片
this.$refs.signature.generate().then(res => {
console.log(res) // base64图片
}).catch(err => {
alert(err) // 画布没有签字时会执行这里 'Not Signned'
})
缩放签名至scaleRatio倍
this.$refs.signature.transformScaleRatio()
签名恢复尺寸
this.$refs.signature.restoreScaleRatio()