前端签名插件 smooth-signature

美酒没故事°2025-01-11 20:37
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>