vue里实现鼠标签名,支持PC\移动端,返回base64或者file格式的文件流
1 、安装插件 vue-esign
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>
export default {
name: '',
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() * 10000000000000
randnum = Math.floor(randnum)
let fileName = "dianziqianming/" + randnum + '.png'
let file = this.dataURLtoFile(res, fileName)
console.log(file, "file")
// 调接口
}).catch(err => {
console.log(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>