共计 2292 个字符,预计需要花费 6 分钟才能阅读完成。
问题形容
在咱们开发我的项目中,特地是流程审批类的我的项目,最初一步会提交审核,审核员看完相应信息当前,没问题就会签字通过审批。所以就要用到本篇文章中的 vue-esign 签字技术。
vue-esign 技术是基于 html5 代新个性,canvas 技术进行的组件化封装,在那个页面须要用到签字技术,只须要引入 vue-esign 组件即可。这个组件其实也是能够了解为是一个插件。本篇文章记录一下这个插件的用法,忘了的时候回来看看。咱们先看一下最终的 demo 效果图
vue-esign 效果图
左边控制台输出的就是生成的签名画布图片转成 base64 格局的图片信息
应用步骤
第一步,下载并注册 vue-esign 插件
下载:cnpm i vue-esign --save
main.js 中引入并注册这个插件:
import vueEsign from 'vue-esign'
Vue.use(vueEsign);
第二步,应用 vue-esign 插件
<template>
<div id="app">
<!-- 做应用 el-dialog 做签字的弹框 -->
<el-dialog title="签字" :visible.sync="dialogVisible" width="800px" append-to-body>
<!-- 应用这个签名组件 -->
<vue-esign
ref="esign"
class="mySign"
:width="800"
:height="300"
:isCrop="isCrop"
:lineWidth="lineWidth"
:lineColor="lineColor"
:bgColor.sync="bgColor"
/>
<span slot="footer" class="dialog-footer">
<el-button @click="handleGenerate" type="primary"> 生成签字图片 </el-button>
<el-button @click="handleReset"> 清空画板 </el-button>
<el-button @click="dialogVisible = false"> 勾销 </el-button>
</span>
</el-dialog>
<!-- 审查人点击确认签字按钮触发签字 -->
<div class="checkMan">
<h2> 审查人 </h2>
<el-button plain @click="dialogVisible = true" type="primary"> 点击签字 </el-button>
<!-- 用户用来预览签字图片的中央 -->
<img :src="resultImg" alt="" />
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
dialogVisible: false, // 弹框是否开启
lineWidth: 6, // 画笔的线条粗细
lineColor: "#000000", // 画笔的色彩
bgColor: "", // 画布的背景色彩
resultImg: "", // 最终画布生成的 base64 图片
isCrop: false, // 是否裁剪,在画布设定尺寸根底上裁掉周围空白局部
};
},
methods: {
// 清空画板
handleReset() {this.$refs.esign.reset();
},
// 生成签字图
handleGenerate() {
this.$refs.esign
.generate() // 应用生成器调用把签字的图片转换成为 base64 图片格式
.then((res) => {this.resultImg = res;})
.catch((err) => {
// 画布没有签字时会执行这里提醒一下
this.$message({
type: "warning",
message: "请签名后再生成签字图片",
});
});
// 在这里向后端发申请把转换后的 base64 文件传给后端,后端接管当前再转换成图片做动态图片存储
// 当然也能够把 base64 转成流文件 blob 格局的,相似上传给后端这样,具体哪种形式看后端要求
setTimeout(() => {
// 这里要应用定时器略微延后当前就能取到 base64 数据了,当然也能够再加一个确认按钮,如:确认应用这张 base64 签名图片
// 点击确认当前,在其回调函数中,再把 base64 的签名图片传给后端用于存储
console.log('我是签字后的 base64 图片',this.resultImg);
}, 200);
this.dialogVisible = false;
},
},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
height: 100%;
padding: 60px;
.checkMan {
width: 400px;
height: 360px;
text-align: center;
border: 1px solid #e9e9e9;
padding-top: 40px;
h2 {margin-bottom: 20px;}
.el-button {margin-bottom: 20px;}
img {
width: 100%;
height: 200px;
}
}
}
/deep/ .el-dialog__body {
// 设置一下签字区域的虚线边框
.mySign {border: 1px dashed #000;}
}
</style>
其实用法也很简略,细节的正文写在代码外面了。记录一下
最初附上官网的 npmjs 文档链接解说,传送门如下:
https://www.npmjs.com/package…
正文完