Vue 实现电子签名

1、下载插件

npm install vue-esign --save

2、全局引入

//main.js中引入：
import vueEsign from 'vue-esign'
Vue.use(vueEsign)

3、示例代码

<template><div><el-card class="box-card"><div slot="header" class="clearfix"><span>这是电子签名组件</span></div><div class="text item">1.定义数据和清空、生成事件回调</div><div class="text item">2.模板中使用组件,并属性传值</div><div class="text item">3.上传到oss并返回访问路径在模板中显示</div><div class="text item"><img :src="resultImg" class="show-img" v-if="resultImg != ''"><div class="show-info" v-else>请在下方书写电子签名</div></div></el-card><el-card class="qianming-container" body-style="padding:0px"><vue-esign ref="esign"  :isCrop="isCrop" :width="600" :height="300" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" ></vue-esign><div class="contro-container"><el-button type="danger"  @click="handleReset">清空画板</el-button><el-button type="primary" @click="handleGenerate">生成图片</el-button></div></el-card></div>
</template><script>import client  from 'common/js/ossClient.js'export default {name:'Qianming',data(){return {lineWidth: 6,lineColor: '#000000',bgColor: '',resultImg: '',isCrop: false}},methods:{//清空画板..handleReset () {this.$refs.esign.reset();this.resultImg =''},//生成签名图片..handleGenerate () {this.$refs.esign.generate().then(res => {let randnum = Math.random() * 10000000000000randnum = Math.floor(randnum)let fileName = "dianziqianming/" + randnum + '.png'let file = this.dataURLtoFile(res,fileName)client.put(fileName, file).then(res=>{if(res.url){this.resultImg = res.url}else{this.$message.error('文件上传失败')}}).catch(err=>{})}).catch(err => {this.$message.error('请签名之后提交！')})},//将base64转换为文件..dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type:mime});}}}
</script> <style scoped>button{height:40px;}.show-img{width:400px;height:200px;border:1px solid #123456;}.show-info{width:400px;height:200px;font-size:24px;display:flex;align-items:center;justify-content:center;}.contro-container{width:600px;height:50px;display:flex;flex-direction:row;align-items:center;justify-content:space-around;background-color:#D3D3D3;position:absolute;bottom:0px;}.qianming-container{width:600px;height:350px;margin:20px auto;position:relative;}.text {font-size: 14px;}.item {margin-bottom: 18px;}.clearfix:before,.clearfix:after {display: table;content: "";}.clearfix:after {clear: both}.box-card {width: 95%;margin-left:2.5%;margin-top:20px;}
</style>

4、文件格式

默认canvas会生成base64格式的图片，使用oss上传需要将图片转化成标准图片格式，转化方法代码：

dataURLtoFile(dataurl, filename) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type:mime});
}

5.组件样式

初始样式截图

签字样式

链接：https://www.jianshu.com/p/5d5f2917a87e

Vue 实现电子签名相关推荐

vue 实现电子签名功能支持生成图片
start 最近遇到需求,说是要在前端页面,做一个电子签名的功能. 以前番茄玩过不少canvas的demo,这玩意我第一反应就是canvas. 简单记录一下这个功能. github 自己造轮子有点麻烦 ...
vue signature 电子签名
只修改3视图文件文件夹位置放的相同就不用改相对地址 npm install vue-signature-simple 文件名index.js 与main.js同级 import VueSignat ...
关于“量变”和“质变”的圣贤语录与辩证思考
中国圣贤:天下大事必作于细,天下难事必作于易. 合抱之木,生于毫末:九层之台,起于累土:千里之行,始于足下. 不积跬步,无以至千里.不积小流,无以成江海. 夫风生于地,起于青苹之末.风起于青萍之末,浪 ...
vue中使用电子签名
使用vue-cli4脚手架,js-signature 2.0.0(https://www.npmjs.com/package/jq-signature)jquery 3.4.1. 1.安装jq及js- ...
pc端签名 vue 生成图片_使用vue实现一个电子签名组件
使用vue实现一个电子签名组件在生活中我们使用到电子签名最多的地方可能就是银行了,每次都会让你留下大名.今天我们就要用vue实现一个电子签名的面板想要绘制图形,第一步想到的就是使用canvas标签 ...
【电子签名手机-vue】
电子签名手机-vue <template><div class="signature" @touchmove.prevent><div class=& ...
使用vue造个小轮子vue-asign，canvas生成电子签名，满足需求
优化需求,内容是生成电子签名,发现好多个项目都重复写,于是打算自己造个小轮子,名字就叫vue-asign,说明文档如下: vue-asign Canvas 生成电子签名支持vue2.vue3 演示d ...
pc端签名 vue 生成图片_vue 使用 canvas 实现手写电子签名
功能兼容 PC 和 Mobile: 画布自适应屏幕大小变化(窗口缩放.屏幕旋转时画布无需重置,自动校正坐标偏移): 自定义画布尺寸(导出图尺寸),画笔粗细.颜色,画布背景色: 支持裁剪 (针对需求: ...
前端实现电子签名（vue组件）
可直接复用(签字图片上传地址更改即可base64) base64已转化为formData格式 <template><div><div class="hello& ...
Vue—使用canvas实现电子签名
前言实现签名的功能听着很复杂,其实很简单.使用canvas辅助的API和监听鼠标相关事件即可实现. 思考: 1.如何使用canvas画线 ? 2.如何判断在提交签名时判断是否有签名 ? 3.如何将c ...

Vue 实现电子签名

1、下载插件

2、全局引入

3、示例代码

4、文件格式

5.组件样式

Vue 实现电子签名相关推荐

最新文章

热门文章