main.js引入文件
import SignCanvas from "sign-canvas";
Vue.use(SignCanvas);
根据报错提示安装依赖:
npm install --save sign-canvas
组件文件on-line:
<template>
<div class="sign">
<el-dialog title="在线签名" :visible.sync="visible" :show-close="false">
<sign-canvas
class="sign-canvas"
ref="SignCanvas"
:options="options"
v-model="value"
/>
<div class="btnList">
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="canvasClear()"
>清空</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-check"
@click="saveAsImg()"
>保存</el-button
>
<el-button
type="info"
size="small"
icon="el-icon-download"
circle
@click="downloadSignImg()"
>下载</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "signDialog",
props: {
//弹窗变量
visible: {
type: Boolean,
default: false
},
//图片信息Base64
src: {
type: String,
default: null
}
},
data() {
return {
value: null,
options: {
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: "round", //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 700, //canvas宽高 [Number] 可选
canvasHeight: 450, //高度 [Number] 可选
isShowBorder: false, //是否显示边框 [可选]
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();
console.log()
//alert(`image 的base64:${img}`);
this.$emit("update:visible", false);
},
/**
* 下载图片
*/
downloadSignImg() {
this.$refs.SignCanvas.downloadSignImg();
}
}
};
</script>
<style lang="stylus" scoped>
.sign >>> .el-dialog{
background: #b4a078;
width:100%;
}
.sign >>> .el-dialog__header {
padding 2px 0px
}
.sign >>> .el-dialog__body {
padding 0
}
.sign >>> .el-button{
/*font-family STXingkai*/
font-size 12px
font-weight 400
}
.btnList{
padding 5px
}
.sign >>> .el-dialog__title {
line-height: 32px;
font-size: 24px;
/*font-family STXingkai*/
color: hsl(40, 28.57% , 30.82%);
text-shadow: 0 .03em .03em black;
}
.sign-canvas {
display: block;
margin: 0 auto;
background: #f4f0ea;
border-radius: 8px;
}
</style>
引用组件的文件:
<template>
<div class="signing-small-screen">
<sign-dialog
:visible.sync="receiverSignFlag"
@change="handleReceiverSign"
></sign-dialog>
<!-- <template
v-if="getReceiver != null && getReceiver != undefined"
>
<img :src="getReceiver" width="80" height="60" />
</template> -->
<el-button
type="primary"
@click="handleReceiverFlag"
icon="el-icon-edit"
size="small"
style="float: right;margin-top: 15px;"
>签名</el-button
>
</div>
</template>
<script>
export default {
components: {
"sign-dialog":()=>import("@/pages/sign-up-screen/on-line")
},
data() {
return {
receiverSignFlag:false,
};
},
computed: {},
watch: {},
methods: {
handleReceiverSign(){
this.receiverSignFlag=true
},
handleReceiverFlag(){
this.receiverSignFlag=true
}
},
}
</script>
<style lang='scss' scoped>
</style>
效果图:
在当前文件使用,不用组件模式
<template>
<div class="sign">
<sign-canvas
class="sign-canvas"
ref="SignCanvas"
:options="options"
v-model="value"
/>
<div class="btnList">
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="canvasClear()"
>清空</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-check"
@click="saveAsImg()"
>保存</el-button
>
<el-button
type="info"
size="small"
icon="el-icon-download"
circle
@click="downloadSignImg()"
>下载</el-button>
</div>
</div>
</template>
<script>
export default {
name: "signDialog",
props: {
//弹窗变量
visible: {
type: Boolean,
default: false
},
//图片信息Base64
src: {
type: String,
default: null
}
},
data() {
return {
value: null,
options: {
lastWriteSpeed: 1, //书写速度 [Number] 可选
lastWriteWidth: 2, //下笔的宽度 [Number] 可选
lineCap: "round", //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square] 正方形线帽
lineJoin: "round", //线条交汇时边角的类型 [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
canvasWidth: 700, //canvas宽高 [Number] 可选
canvasHeight: 450, //高度 [Number] 可选
isShowBorder: false, //是否显示边框 [可选]
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}`);
// this.$emit("update:visible", false);
},
/**
* 下载图片
*/
downloadSignImg() {
this.$refs.SignCanvas.downloadSignImg();
}
}
};
</script>
<style lang="stylus" scoped>
.sign >>> .el-dialog{
background: #b4a078;
width:100%;
}
.sign >>> .el-dialog__header {
padding 2px 0px
}
.sign >>> .el-dialog__body {
padding 0
}
.sign >>> .el-button{
/*font-family STXingkai*/
font-size 12px
font-weight 400
}
.btnList{
padding 5px
}
.sign >>> .el-dialog__title {
line-height: 32px;
font-size: 24px;
/*font-family STXingkai*/
color: hsl(40, 28.57% , 30.82%);
text-shadow: 0 .03em .03em black;
}
.sign-canvas {
display: block;
margin: 0 auto;
background: #f4f0ea;
border-radius: 8px;
}
</style>
参考链接:https://www.jianshu.com/p/5c8f7016b886