博客
关于我
vue 实现鼠标签名,支持PC\移动端
阅读量:300 次
发布时间:2019-03-01

本文共 2136 字,大约阅读时间需要 7 分钟。

1 、安装插件 vue-esign

npm install vue-esign --save

2、在main.js引用

import vueEsign from 'vue-esign'Vue.use(vueEsign)

3、页面中使用

清空
保存
引入地址 import { baseUrl} from '@/utils/env.js'; data () { return { lineWidth: 6, lineColor: '#000000', bgColor: '', resultImg: '', isCrop: false }},

**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学习总结(77)——温故Mysql数据库开发核心原则与规范
查看>>
Mysql学习总结(78)——MySQL各版本差异整理
查看>>
Mysql学习总结(79)——MySQL常用函数总结
查看>>
Mysql学习总结(7)——MySql索引原理与使用大全
查看>>
Mysql学习总结(80)——统计数据库的总记录数和库中各个表的数据量
查看>>
Mysql学习总结(81)——为什么MySQL不推荐使用uuid或者雪花id作为主键?
查看>>
Mysql学习总结(82)——MySQL逻辑删除与数据库唯一性约束如何解决?
查看>>
Mysql学习总结(83)——常用的几种分布式锁:ZK分布式锁、Redis分布式锁、数据库分布式锁、基于JDK的分布式锁方案对比总结
查看>>
Mysql学习总结(84)—— Mysql的主从复制延迟问题总结
查看>>
Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
查看>>
Mysql学习总结(8)——MySql基本查询、连接查询、子查询、正则表达查询讲解
查看>>
Mysql学习总结(9)——MySql视图原理讲解与使用大全
查看>>
Mysql学习笔记 - 在Centos7环境下离线安装Mysql
查看>>
MySQL学习笔记十七:复制特性
查看>>
Mysql学习第一课-mysql的定义及sql语句
查看>>
mysql学号的字符长度_MYSQL--2
查看>>
mysql安全模式: sql_safe_updates
查看>>
mysql安装,卸载,连接
查看>>
MySQL安装之没有配置向导
查看>>
mysql安装出现 conflicts with mysql*的解决办法
查看>>