vue 实现鼠标写签名（电子签名）

奔跑得蜗牛

1 、安装插件 vue-esign

npm install vue-esign --save

2、在main.js引用

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

3、页面中使用

<vue-esign id='canvas' ref="esign" :width='1000' :height="500" style="border: 1px dashed #c2c1c1;" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
<div style="text-align:center;line-height:50px; "><el-button style="margin: 0px 20px;" @click="handleReset" size="small">清空</el-button><el-button style=" margin: 0px 20px;" type="primary" @click="handleGenerate" size="small">保存</el-button>
</div>引入地址import {baseUrl} from '@/utils/env.js';data () {return {lineWidth: 6,lineColor: '#000000',bgColor: '',resultImg: '',isCrop: false}
},

4、返回数据为base64 具体看你返回得数据

    handleGenerate() { // 获取base64var _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转换为blobdataURLtoBlob(dataurl) {var arr = dataurl.split(',')var mime = arr[0].match(/:(.*?);/)[1]var bstr = atob(arr[1])var n = bstr.lengthvar u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], { type: mime })},// 将blob转换为fileblobToFile(theBlob, fileName) {theBlob.lastModifiedDate = new Date()theBlob.name = fileNamereturn theBlob},

5、清除

 handleReset() { // 清除if (this.$refs.esign) {this.$refs.esign.reset();}var obj = document.getElementById("canvas");obj.style.backgroundColor = "#fff";  保存时背景},

6、图例

vue 实现鼠标写签名（电子签名）相关推荐

html5 移动端手写签名,H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. 刚好项目用到此功能,就网上找了一下,清理了无用代码,简单方便,因为项目中多个地方需要使用,所以我将它整理为组件,通过ref和 ...
H5移动端项目实现手写签名功能 vue实现手写签名
vue 移动端实现手写签名效果,功能很完美,保存时保存为base64格式. base64转file文件格式 vue中将base64转file文件格式刚好项目用到此功能,就网上找了一下,清理了无用代码 ...
使用vue实现手写签名功能
个人实现截图: 安装: npm install vue-esign --save 使用: 1.在main.js中引入 import vueEsign from 'vue-esign' Vue.use ...
vue移动端横屏手写签名
最近项目组要求做一个移动端手写签名的组件,效果图如下去查了很多资料,也借鉴了很多别人写好的例子,最终完成,记录一下因为需要横屏签名,所以有监听手机屏幕,如果是手机屏幕锁定的情况下就通过代码旋转页面 ...
微信小程序手写签名_微信小程序实现电子签名功能
本文实例为大家分享了微信小程序实现电子签名的具体代码,供大家参考,具体内容如下 // XXXX.wxml bindtouchmove="canvasMove" bindtouche ...
手机手写签名 php,基于canvas实现手写签名（vue）
最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣.就自己基于vue写了一个简易的手写签名demo. 其中原理比较简单,先生成一个canvas画布,并对canvas进行touchstar ...
android 电子签名手写签名功能实现
android 电子签名手写签名功能实现这个手写的效果就是一个重写的的自定义的view 代码如下: package com.example.hand.views;import java. ...
Android 电子签名，手写签名案列实现方法，并上传网页显示（base64）！
最近说项目可能会用到一个电子签名,不需要识别的那种,只是一个单纯手写签名,然后以base64的格式提供给前端web页面.其实挺简单的,自定义一个手写view就上线了.Android 电子签名,手写签名 ...
vue 手写签名_与众不同的手写签批
随着移动互联网+时代的到来,手机成了我们日常生活中不可缺少的必备用品,它不仅仅是一个通讯工具,更是一台移动电脑.因此越来越多的单位把希望在手机上就能完成业务的处理,但也希望能还原线下办理的效果.因此, ...

vue 实现鼠标写签名（电子签名）

vue 实现鼠标写签名（电子签名）相关推荐

最新文章

热门文章