html5手写签名并保存数据库或下载

2023-10-07 网页编程网 网页编程网

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>电子签字</title>
  </head>
  <body>
    <canvas></canvas>
    <div>
      <button onclick="save()">保存</button>
      <button onclick="cancel()">取消</button>
    </div>
  </body>
</html>
<script>
let canvas = document.querySelector('canvas')
let config = {
width: 400, // 宽度
height: 200, // 高度
lineWidth: 5, // 线宽
strokeStyle: 'red', // 线条颜色
lineCap: 'round', // 设置线条两端圆角
lineJoin: 'round', // 线条交汇处圆角
}
canvas.width = config.width
canvas.height = config.height
// 设置一个边框，方便我们查看及使用
canvas.style.border = '1px solid #000'
// 创建上下文
let ctx = canvas.getContext('2d')

// 设置填充背景色
ctx.fillStyle = 'transparent'
// 绘制填充矩形
ctx.fillRect(
0, // x 轴起始绘制位置
0, // y 轴起始绘制位置
config.width, // 宽度
config.height // 高度
);
// 保存上次绘制的 坐标及偏移量
let client = {
offsetX: 0, // 偏移量
offsetY: 0,
endX: 0, // 坐标
endY: 0
}
// 判断是否为移动端
let mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

// 初始化
let inits = event => {
// 获取偏移量及坐标
let {
  offsetX,
  offsetY,
  pageX,
  pageY
} = mobileStatus ? event.changedTouches[0] : event

// 修改上次的偏移量及坐标
client.offsetX = offsetX
client.offsetY = offsetY
client.endX = pageX
client.endY = pageY

// 清除以上一次 beginPath 之后的所有路径，进行绘制
ctx.beginPath()

// 根据配置文件设置进行相应配置
ctx.lineWidth = config.lineWidth
ctx.strokeStyle = config.strokeStyle
ctx.lineCap = config.lineCap
ctx.lineJoin = config.lineJoin

// 设置画线起始点位
ctx.moveTo(client.endX, client.endY)

// 监听 鼠标移动或手势移动
window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)
}
// 创建鼠标/手势按下监听器
window.addEventListener(mobileStatus ? "touchstart" : "mousedown", inits)
// 绘制
let draw = event => {
// 获取当前坐标点位
let {
  pageX,
  pageY
} = mobileStatus ? event.changedTouches[0] : event
// 修改最后一次绘制的坐标点
client.endX = pageX
client.endY = pageY

// 根据坐标点位移动添加线条
ctx.lineTo(pageX, pageY)

// 绘制
ctx.stroke()
}
// 结束绘制
let cloaseDraw = () => {
// 结束绘制
ctx.closePath()
// 移除鼠标移动或手势移动监听器
window.removeEventListener("mousemove", draw)
}
// 创建鼠标/手势 弹起/离开 监听器
window.addEventListener(mobileStatus ? "touchend" : "mouseup", cloaseDraw)

// 取消-清空画布
let cancel = () => {
// 清空当前画布上的所有绘制内容
ctx.clearRect(0, 0, config.width, config.height)
}

// 保存-将画布内容保存为图片
let save = () => {
// 将canvas上的内容转成blob流
canvas.toBlob(blob => {
  console.log(blob);
  // // 获取当前时间并转成字符串，用来当做文件名
  let date = Date.now().toString()
  // // 创建一个 a 标签
   let a = document.createElement('a')
  // // 设置 a 标签的下载文件名
   a.download = `${date}.png`
  // // 设置 a 标签的跳转路径为 文件流地址
   a.href = URL.createObjectURL(blob)
  // // 手动触发 a 标签的点击事件
   a.click()
  // // 移除 a 标签
   a.remove()
})
}
</script>

阅读原文

阅读 666

123 显示电脑版