h5手写签名

1.下载npm包

npm i sign-canvas --save

2.main.js文件内全局引入

import SignCanvas from 'sign-canvas';
Vue.use(SignCanvas);

3. 页面内使用

<view class="popwrap">
                <view class="popcont">
                    <view  class="popicon"><u-icon name="close-circle" size="60" color="#1989fa" @click="onClosePop"></u-icon></view>
                    <view class="wricont">
                        <sign-canvas class="canvaStyle" ref="SignCanvas":options="options" v-model="canvasValue"/>
                    </view>
                    <view class="wribtn">
                        <u-button class="combtn" plain shape="circle" @click="canvasClear">重写</u-button>
                        <u-button class="combtn" shape="circle" @click="exportConfirm">确认</u-button>
                    </view>
                </view>
            </view>

data(){
        return {
            canvasValue: null,
            options:{
                //根据需求配置
                isSign: false, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
                isShowBorder: false, //是否显示边框 [可选]
            }
        }
    }

//确认导出
           exportConfirm(){
                if(this.canvasValue == null){
                    uni.showToast({
                        title:'请绘制签名',
                        icon:'none'
                    })
                }
                const img = this.$refs.SignCanvas.saveAsImg();
                alert(`image 的base64：${img}`);
            },
//清空画布
            canvasClear(){
                this.$refs.SignCanvas.canvasClear();
            },

// css样式
.popwrap{
        width:500rpx;
        height:900rpx;
    }
    .popcont {
        width: 600rpx;
        background-color: #f5f5f5;
    }

    .popicon {
        background-color: #fff;
        text-align: center;
    }

    .wricont {
        width: 100%;
        height: 680rpx;
        overflow: hidden;
    }

    .canvaStyle {
        height: 100%;
        width: 100%;
        background-color: #fff !important;
    }

    .wribtn {
        padding: 50rpx 50rpx 30rpx;
        display: flex;
        justify-content: space-between;
    }

    .combtn {
        width: 200rpx;
    }

最后附上大神链接【https://blog.csdn.net/qq_33270001/article/details/102855964】