vue-canvas-signature

Canvas 手写签字 手写签名 电子签名

功能

1. 兼容 PC 和 Mobile；
2. 画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标）；
3. 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色；
4. 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。
5. 导出图片格式为 base64；
6. 支持缩放倍数

安装

npm install vue-canvas-signature --save

使用

1. main.js 中引入

import vueSignature from 'vue-canvas-signature'
createApp(App).use(vueSignature).mount('#app')

2. 页面中使用 必须设置 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()
    },
    
}

3. 说明

| 属性 | 类型 | 默认值 | 说明 | | :-: | :-- | :-: | :-- | | 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()