前端签名插件 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>
相关推荐
xw56 分钟前
uni-app中v-if使用”异常”
前端·uni-app
!win !25 分钟前
uni-app中v-if使用”异常”
前端·uni-app
IT_陈寒1 小时前
Java 性能优化:5个被低估的JVM参数让你的应用吞吐量提升50%
前端·人工智能·后端
南囝coding1 小时前
《独立开发者精选工具》第 018 期
前端·后端
小桥风满袖1 小时前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花2 小时前
i18n国际语言化配置
前端
编程贝多芬2 小时前
Promise 的场景和最佳实践
前端·javascript
Asort2 小时前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio2 小时前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗2 小时前
JS的对象属性存储器
前端