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 InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql insert update 同时执行_MySQL进阶三板斧（三）看清“触发器 (Trigger)”的真实面目...
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值？
查看>>
Mysql join原理
查看>>
MySQL Join算法与调优白皮书（二）
查看>>
Mysql order by与limit混用陷阱
查看>>
Mysql order by与limit混用陷阱
查看>>
mysql order by多个字段排序
查看>>
MySQL Order By实现原理分析和Filesort优化
查看>>
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法（mysql字符串替换）
查看>>
mysql replace用法
查看>>
Mysql Row_Format 参数讲解
查看>>
mysql select， from ，join ，on ，where groupby,having ,order by limit的执行顺序和书写顺序
查看>>
MySQL Server 5.5安装记录
查看>>
mysql server has gone away
查看>>
mysql slave 停了_slave 停止。求解决方法
查看>>
MySQL SQL 优化指南：主键、ORDER BY、GROUP BY 和 UPDATE 优化详解
查看>>