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

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

签名效果:

预览效果:

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

代码参考:

javascript 复制代码
<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>

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

js 复制代码
// 每次进入页面时执行
onShow() {
    this.img1 = uni.getStorageSync('signPic')
},
html 复制代码
<image :src="img1" style="width: 100%;" mode="widthFix"></image>
相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君018 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序