手签代码
<template>
<div id="app">
<div class="header">
<van-icon name="arrow-left" size="30" @click="goback" />
<span>签名</span>
</div>
<div class="bodysubject">
<div class="hello">
<div id="canvas"></div>
<div class="control">
<p @click="handelClearEl()">清除</p>
<p @click="handelSaveEl()">保存</p>
<p @click="handelThickness()">粗细</p>
<p @click="handelColour()">颜色</p>
</div>
</div>
</div>
</div>
</template>
<script>
let canvas = document.createElement("canvas");
let cxt = canvas.getContext("2d");
export default {
data() {
return {
linewidth: 1,
color: "black",
background: "#fff",
imgsrc: "",
staffId: ""
};
},
methods: {
goback() {
this.$router.go(-1);
},
getCanvas() {
let el = document.getElementById("canvas");
el.appendChild(canvas);
canvas.width = el.clientWidth;
canvas.height = el.clientHeight;
cxt.fillStyle = this.background;
cxt.fillRect(0, 0, canvas.width, canvas.height);
cxt.strokeStyle = this.color;
cxt.lineCap = "round";
let linewidth = this.linewidth;
canvas.addEventListener(
"touchstart",
function(e) {
e.preventDefault();
cxt.beginPath();
cxt.lineWidth = linewidth;
cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY - 50);
}.bind(this),
false
);
canvas.addEventListener(
"touchmove",
function(e) {
cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY - 50);
cxt.stroke();
}.bind(this),
false
);
canvas.addEventListener(
"touchend",
function() {
cxt.closePath();
}.bind(this),
false
);
},
handelColour() {
this.color = "red";
this.getCanvas();
},
handelThickness() {
this.linewidth = 5;
this.getCanvas();
},
handelClearEl() {
this.linewidth = 1;
this.color = "black";
cxt.clearRect(0, 0, canvas.width, canvas.height);
this.getCanvas();
},
async handelSaveEl() {
this.staffId = JSON.parse(sessionStorage.getItem("messagedata")).staffId;
let imgBase64 = canvas.toDataURL();
this.imgsrc = imgBase64;
sessionStorage.setItem("imgBase", this.imgsrc);
let value = JSON.parse(sessionStorage.getItem("messagedata"));
value.signature = imgBase64;
sessionStorage.setItem("messagedata", JSON.stringify(value));
const { data } = await this.axios.post(`/app/common/uploadSignature`, {
signatureData: imgBase64,
staffId: this.staffId
});
this.$router.go(-1);
}
},
created() {},
mounted() {
this.getCanvas();
}
};
</script>
<style lang='less' scoped>
@w: 75;
.hello {
width: 100%;
height: 800rem / @w;
}
#canvas {
width: 100%;
height: 100%;
position: relative;
background-color: #fff;
}
#canvas canvas {
display: block;
}
.control {
display: flex;
margin-top: 20rem / @w;
justify-content: space-between;
p {
border: 1px solid blue;
padding: 10rem / @w;
font-size: 35rem / @w;
border-radius: 10rem / @w;
color: #fff;
background-color: #1381fe;
}
}
</style>