前端签名插件 smooth-signature

html 复制代码
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>签名</title>
		<style>
			.container {
				display: flex;
			}

			.handler {
				display: grid;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="sign-board" style="border: 3px dotted #a7a7a7; border-radius: 8px;"></canvas>
			<div class="handler">
				<button onclick="back()">退一步</button>
				<button onclick="clearing()">清屏</button>
				<button onclick="getPNGimg()">确定</button>
			</div>
		</div>



		<script src="https://unpkg.com/smooth-signature/dist/index.umd.min.js"></script>
		<script>
			const canvas = document.querySelector("#sign-board");
			const signature = new SmoothSignature(canvas, {
				width: 1000,
				height: 600,
				scale: 2,
				minWidth: 4,
				maxWidth: 10,
				bgColor: '#efefef'
			});



			// 生成PNG
			function getPNGimg() {
				const img = signature.getPNG() // 或者 signature.toDataURL()
				console.log(img);
			}

			// 清屏
			function clearing() {
				signature.clear()
			}


			// 撤销
			function back() {
				signature.undo()
			}


			// 是否为空
			function isNull() {
				const isNull = signature.isEmpty();
				console.log(isNull);
			}


			function rotate90() {
				signature.getRotateCanvas(90)
			}
		</script>
	</body>
</html>
相关推荐
喜欢你,还有大家25 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在28 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi39 分钟前
Dokploy安装和部署项目流程
运维·前端
普通网友41 分钟前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢44 分钟前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_1 小时前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端
龙在天1 小时前
我是前端,scss颜色函数你用过吗?
前端