概述
最近项目里面使用到了需要保存用户签名相关的功能，这里记录一期通过canvas实现的过程。
效果
实现
其实很简单，就是监听canvas画布的按下，滑动和抬起的过程，然后绘制路径，最后生成base64,可以下载预览。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<canvas
ref="canvas"
@mousedown="startDrawing"
@mousemove="draw"
@mouseup="stopDrawing"
></canvas>
<div>
<button id="clear-btn">清除</button>
<button id="save-btn">保存</button>
</div>
</div>
<script>
let isDrawing = false // 是否正在绘制
let context = null // Canvas上下文
let clearBtn = document.querySelector('#clear-btn')
let saveBtn = document.querySelector('#save-btn')
let canvas = document.querySelector('canvas')
context = canvas.getContext('2d')
canvas.width = 500
canvas.height = 300
// 鼠标按下时触发
canvas.addEventListener('mousedown', (event) => {
isDrawing = true // 开始绘制
const { offsetX, offsetY } = event // 获取鼠标相对于Canvas的偏移量
context.beginPath() // 开始新的路径
context.moveTo(offsetX, offsetY) // 将路径移动到鼠标位置
})
// 移动中
canvas.addEventListener('mousemove', (event) => {
if (!isDrawing) return // 如果没有在绘制中，则返回
const { offsetX, offsetY } = event // 获取鼠标相对于Canvas的偏移量
context.lineTo(offsetX, offsetY) // 绘制路径
context.stroke() // 绘制路径的边框
})
// 鼠标抬起
canvas.addEventListener('mouseup', (event) => {
isDrawing = false // 停止绘制
})
// 清除
clearBtn.addEventListener('click', () => {
context.clearRect(0, 0, canvas.width, canvas.height) // 清除Canvas上的内容
})
// 保存
saveBtn.addEventListener('click', () => {
const img = canvas.toDataURL('image/png') // 将Canvas转换为图片
console.log(img) // 输出签名的Base64编码到控制台
const a = document.createElement('a') // 创建一个a标签
a.href = img // 设置a标签的href属性
a.download = '签名.png' // 设置a标签的download属性
a.click() // 点击a标签
})
</script>
</body>
</html>
