VUE中使用canvas做签名功能，兼容IE
<template>
<div>
<div class="msgInput">
<div class="msgInputLeft">
<span class="qianming">签名:</span>
<div class="sign-canvas">
<canvas
id="canvas"
width="600"
height="600"
@mousedown="canvasDown($event)"
@mousemove="canvasMove($event)"
@mouseup="canvasUp()"
@mouseleave="canvasLeave()"
ref="canvas"
>
抱歉，您的浏览器暂不支持canvas元素
</canvas>
</div>
<div class="bottom_btn">
<el-button type="primary" @click="clear" class='clickReset' round>清除签名</el-button>
<el-button type="primary" @click="request" class='clickFinish' round>确认</el-button>
<!-- <el-button type="primary" @click="request" round>发送请求</el-button> -->
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {},
data() {
return {
imgBase64:''
}
},
watch: {},
computed: {},
methods: {
show(){
this.canvas = this.$refs.canvas;// 指定canvas
this.ctx = this.canvas.getContext("2d") // 设置2D渲染区域
this.ctx.lineWidth = 5; // 设置线的宽度
},
canvasDown(e) {
console.log(e);
this.canvasMoveUse = true;
const canvasX = e.clientX - e.target.offsetLeft + document.documentElement.scrollLeft
const canvasY = e.clientY -5 - e.target.offsetTop + document.documentElement.scrollTop
this.ctx.beginPath() // 移动的起点
this.ctx.moveTo(canvasX, canvasY)
},
canvasMove(e) {
// 只在移动是进行绘制图线
if (this.canvasMoveUse) {
const t = e.target;
let canvasX;
let canvasY;
canvasX = e.clientX - t.offsetLeft + document.documentElement.scrollLeft
canvasY = e.clientY -5 - t.offsetTop + document.documentElement.scrollTop
this.ctx.lineTo(canvasX, canvasY)
this.ctx.stroke()
}
},
canvasUp() {
this.canvasMoveUse = false;
},
canvasLeave() {
this.canvasMoveUse = false;
},
clear(){
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height)
},
request() {
this.imgBase64 = this.$refs.canvas.toDataURL('image/png');
console.log(this.imgBase64);
}
},
created() {},
mounted() {
this.show();
}
}
</script>
<style>
.qianming{
margin-left: 30px;
font-size: 20px;
}
.qianming_title{
margin-left: 30px;
padding-top:20px;
font-size: 20px;
}
.bottom_btn{
margin-top:40px;
}
.msgInput {
height: 800;
width: 800px;
}
.msgInputLeft {
height: 800px;
width: 800px;
background: white;
border-radius: 15px;
padding-top:20px;
}
.sign-canvas{
display: flex;
flex-direction: column;
align-items: center;
width: 600px;
height: 600px;
padding: 20px 30px;
}
.sign-canvas canvas{
background-color: #fefeff;
border: 2px solid #409EFF;
border-radius:10px;
margin-left: 25%;
}
.sign-btn {
display: flex;
margin:20px 0;
}
.sign-btn div {
width: 175px;
text-align: center;
height: 70px;
line-height: 70px;
color: #FFFFFF;
}
.sign-btn div:active {
background-color: rgb(255, 253, 253);
color: #333333;
}
.sign-btn .clear {
background-color: #FF8F58;
}
.sign-btn .save {
background-color: #0599D7;
}
.clickReset{
margin-top:20px;
margin-left: 30px;
background-color: white;
color:#409EFF;
border: 2px solid #409EFF;
}
.clickFinish{
float: right;
margin-top:20px;
margin-right: 30px;
}
</style>
