网页编程网
www.youkud.com
掌握计算机、网络技术,让生活更美好!
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
R语言
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置:
主页
>>
html5
>> 正文
html5手写签名并保存数据库或下载
阅读:1644 输入:2023-10-07 10:26:45
<!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>
上一篇:
python3中查看库详细信息、更新库
下一篇:
paddleocr识别身份证
相关阅读
canvas图片旋转,图片base64编码,保存图片
下载专区
软件下载(提取码:mtag)
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换(带小数)
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens