vue签字组件smooth-signature

安装：

npm install smooth-signature
# 或
yarn add smooth-signature

Demo演示地址 l2j2c3.gitee.io/smooth-sign… 演示代码

<template>
    <div>
        <canvas />
        <div class='btnBox'>
            <x-button plain class='bggray' @click.native='clearBtn'>清除</x-button>  
            <x-button plain class='bgwhite' @click.native='undoBtn'>上一步</x-button>
            <x-button plain class='bgblue' @click.native='confirmBtn'>提交</x-button> 
        </div>
    </div>
</template>
<script>
import SmoothSignature from "smooth-signature";
mounted(){   
    this.signInit()
},
methods: {
 signInit(){
    const canvas = document.querySelector("canvas");
    this.signature = new SmoothSignature(canvas, {
        width: 600,
        height: 400,
        scale: 2,
        minWidth: 4,
        maxWidth: 10,
        color: '#000',
        bgColor: '#fff'
    });
    // 生成PNG
    // signature.getPNG() // 或者 signature.toDataURL()

    // // 生成JPG
    // signature.getJPG() // 或者 signature.toDataURL('image/jpeg')

    // // 清屏
    // signature.clear()

    // // 撤销
    // signature.undo()

    // // 是否为空
    // signature.isEmpty()

    // // 生成旋转后的新画布 -90/90/-180/180
    // signature.getRotateCanvas(90)
 },
 //清除画布
 clearBtn(){
     // 清屏
    this.signature.clear()   
 },
 //上一步  
 undoBtn(){
   //返回上一步的签字
   this.signature.undo()
 },
//提交签名图片
 confirmBtn(){
     //得到的数据是base64
    let getImgBase = this.signature.toDataURL('image/jpeg')
    this.uploadBase64(getImgBase)
 }
}
</script>
<style scoped>
.btnBox{position: absolute;bottom: 0;display: flex;width: 100%;padding: .6rem 0;background: #fff;border-top: 1px solid #E5E5E5;}
.btnBox button{width: 26%;font-size: 1.2rem;border-radius: 0;margin-top: 0;height: 42px;border-radius: 5px;}
.bggray{background: #CECECE;color: #fff;border: 1px solid #CECECE;}
.bgwhite{background: #fff;color: #3480FF;border: 1px solid #3480FF;}
.bgblue{background: #3480FF;color: #fff;border: 1px solid #3480FF;}
</style>