最近移动端项目遇到需要客户手签的需求,几乎就是银行办理业务手签的场景,不过这次是移动端使用,搜了下还真有成熟的sign-canvas组件可以直接拿来即用,真香了。
先放一张效果动图
用的是sign-canvas组件,将用户手签的内容生成图片并保存、下载,使用非常简单。
准备工作:安装sign-canvas组件
npm install --save sign-canvas
安装完成后引入后声明使用,贴完整代码吧
ps:代码中关于参数和方法的介绍都十分全面了,具体可参考注释内容做取舍
<template>
<div class="signPanel">
<p>手签面板demo</p>
<sign-canvas
class="sign-canvas"
ref="SignCanvas"
:options="options"
v-model="value"/>
<div class="sign-btns">
<span id="clear" @click="canvasClear()">清空</span>
<span id="save" @click="saveAsImg()">保存</span>
<span id="load" @click="downloadSignImg()">下载</span>
</div>
</div>
</template>
<script>
import SignCanvas from "sign-canvas";
export default {
name: "signPanel", // 手签面板组件
components: {
SignCanvas
},
data() {
return {
value: null, // 图片base64内容
options: {
isFullScreen: false, //是否全屏手写 [Boolean] 可选
isFullCover: false, //是否全屏模式下覆盖所有的元素 [Boolean] 可选
isDpr: false, //是否使用dpr兼容高倍屏 [Boolean] 可选
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: 'round', //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: 'bevel', //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 350, //canvas宽高 [Number] 可选
canvasHeight: 370, //高度 [Number] 可选
isShowBorder: true, //是否显示边框 [可选]
bgColor: '#fcc', //背景色 [String] 可选
borderWidth: 1, // 网格线宽度 [Number] 可选
borderColor: "#ff787f", //网格颜色 [String] 可选
writeWidth: 5, //基础轨迹宽度 [Number] 可选
maxWriteWidth: 30, // 写字模式最大线宽 [Number] 可选
minWriteWidth: 5, // 写字模式最小线宽 [Number] 可选
writeColor: '#101010', // 轨迹颜色 [String] 可选
isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
imgType: 'png' //下载的图片格式 [String] 可选为 jpeg canvas本是透明背景的
}
}
},
methods: {
// 清除画板
canvasClear() {
this.$refs.SignCanvas.canvasClear();
},
// 保存图片
saveAsImg() {
const img = this.$refs.SignCanvas.saveAsImg();
alert(`image 的base64:${img}`);
},
// 下载图片
downloadSignImg() {
this.$refs.SignCanvas.downloadSignImg();
}
}
}
</script>
<style lang="less" scoped>
.signPanel {
padding: 20px;
p {
margin: 20px;
}
}
.sign-btns {
display: flex;
justify-content: space-between;
span {
display: inline-block;
width: 76px;
height: 40px;
line-height: 40px;
font-size: 14px;
border: 1px solid #eee;
background: #e1e1e1;
border-radius: 10px;
text-align: center;
margin: 20px auto;
color: #333333;
cursor: pointer;
}
}
</style>