【vue/uniapp】使用 smooth-signature 实现 h5 的横屏电子签名

通过github链接进行下载，然后代码参考如下，功能包含了清空、判断签名内容是否为空、生成png/jpg图片等。

签名效果：

预览效果：

下载 smooth-signature 链接：https://github.com/linjc/smooth-signature

代码参考：

<template>
	<div>
	    <div class="btn">
	        <button class="item" @click="submit">确定</button>
	        <button class="item" @click="clear">清空</button>
	    </div>
	    <canvas />
	    <u-toast ref="uToast" />
	</div>
</template>

<script>
import SmoothSignature from "smooth-signature";
export default {
	name: "handWriteSign",
	data() {
	    return {
	        canvas: '',
	        options: {},
	        signature: ''
	    }
	},
	mounted() {
	    this.initSignature()
	},
	methods: {
	    initSignature() {
	        // 初始化
	        this.canvas = document.querySelector("canvas");
	        // 配置项
	        this.options = {
	            // 画布在页面实际渲染的宽度、高度
	            width: window.innerWidth,
	            height: window.innerHeight - 100,
	            // 画布缩放
	            scale: 2,
	            minWidth: 4,
	            maxWidth: 10,
	            color: '#000',
	            bgColor: '#fff'
	        };
	        this.signature = new SmoothSignature(this.canvas, this.options)
	    },
	    clear() {
	        this.signature.clear()
	    },
	    submit() {
	        // 判断签名内容是否为空
	        const isEmpty = this.signature.isEmpty();
	        if (isEmpty) {
	            return this.$refs.uToast.show({
	                title: '内容为空，请签名',
	                type: 'error'
	            })
	        }
	        // 生成旋转后的新画布 -90/90/-180/180
	        const canvas1 = this.signature.getRotateCanvas(-90)
	        const pngUrl = canvas1.toDataURL()
	        // let signPic = this.signature.getPNG()
	        console.log('signPic', pngUrl);
	        uni.setStorageSync('signPic', pngUrl)
	        if (pngUrl) {
	            uni.navigateBack({
	                delta: 1, // 返回的页面数，如果是1表示返回上一级
	            });
	        }
	    },
	},
};
</script>

<style lang="scss">
	.btn {
	    display: flex;
	    align-items: center;
	    height: 80px;
	    .item {
	        transform: rotate(90deg);
	        border-radius: 8px;
	        border: 1px solid #f0f0f0;
	    }
	}
</style>

然后在要展示签名的页面：

// 每次进入页面时执行
onShow() {
    this.img1 = uni.getStorageSync('signPic')
},

<image :src="img1" style="width: 100%;" mode="widthFix"></image>

补充一下，最后我还遇到了一个问题，在 canvas 画布里莫名地生还成了一个div，这样导致了在这个 div 区域，手写的笔迹有时候会写不上，是个偶然的现象，但是写不上的时候真的很讨厌

去也去不掉，后来直接在组件样式里加了：

::v-deep div {
    display: none !important;
}