vue 实现鼠标签名,支持PC\移动端
本文共 2136 字，大约阅读时间需要 7 分钟。
1 、安装插件 vue-esign
npm install vue-esign --save
2、在main.js引用
import vueEsign from 'vue-esign'Vue.use(vueEsign)
3、页面中使用
清空 保存
**4、返回数据为base64 具体看你返回得数据 **
handleGenerate() { // 获取base64 var _this = this _this.$refs.esign.generate().then(res => { // 转成文件 var blob = _this.dataURLtoBlob(res) var tofile = _this.blobToFile(blob, '签名.jpg') setTimeout(async () => { const formData = new FormData() formData.append('file', tofile, tofile.name) formData.append('fileType', 9) // ajax 请求 }) }).catch(err => { // 画布没有签字时提示 this.$notify({ title: '提示', message: '失败', type: 'warning' }); }) }, // 将base64转换为blob dataURLtoBlob(dataurl) { var arr = dataurl.split(',') var mime = arr[0].match(/:(.*?);/)[1] var bstr = atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } return new Blob([u8arr], { type: mime }) }, // 将blob转换为file blobToFile(theBlob, fileName) { theBlob.lastModifiedDate = new Date() theBlob.name = fileName return theBlob }, 5、清除
handleReset() { // 清除 if (this.$refs.esign) { this.$refs.esign.reset(); } var obj = document.getElementById("canvas"); obj.style.backgroundColor = "#fff"; 保存时背景 }, 6、图例
转载地址：http://asnv.baihongyu.com/
你可能感兴趣的文章
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>
MySQL 高可用性之keepalived+mysql双主
查看>>
mysql-connector-java各种版本下载地址
查看>>
mysql-group_concat
查看>>
MySQL-【4】基本操作
查看>>
Mysql-丢失更新
查看>>
Mysql-事务阻塞
查看>>
Mysql-存储引擎
查看>>
mysql-开启慢查询&所有操作记录日志
查看>>
MySQL-数据目录
查看>>
MySQL-数据页的结构
查看>>
MySQL-架构篇
查看>>
MySQL-索引的分类（聚簇索引、二级索引、联合索引）
查看>>
Mysql-触发器及创建触发器失败原因
查看>>
MySQL-连接
查看>>
mysql-递归查询（二）
查看>>
MySQL5.1安装
查看>>