直接上代码（）
<template>
<div class="signSoard">
<div class="signatureBox">
<div class="canvasBox" ref="canvasHW">
<canvas ref="canvasF" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd'></canvas>
<div class="btnBox">
<div @click="overwrite">重写</div>
</div>
<!-- <div class="zw"></div> -->
</div>
</div>
</div>
</template>
<script>
export default {
name:'signSoard',
data() {
return {
stageInfo:'',
imgUrl:'',
points: [],
canvasTxt: null,
startX: 0,
startY: 0,
moveY: 0,
moveX: 0,
endY: 0,
endX: 0,
isDown: false,
isViewAutograph: this.$route.query.isViews > 0,
contractSuccess: this.$route.query.contractSuccess
}
},
mounted() {
let canvas = this.$refs.canvasF
// canvas.height = this.$refs.canvasHW.offsetHeight
canvas.width = 400
console.log(this.$refs.canvasHW.offsetHeight)
this.canvasTxt = canvas.getContext('2d')
},
methods: {
//定义起始点
touchStart(ev) {
this.stageInfo = this.$refs.canvasF.getBoundingClientRect()
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stageInfo.left,
y: ev.targetTouches[0].clientY - this.stageInfo.top,
}
this.canvasTxt.lineWidth = 2.2;//线宽
this.startX = obj.x
this.startY = obj.y
this.points.push(obj)
}
},
//移动中
touchMove(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stageInfo.left,
y: ev.targetTouches[0].clientY - this.stageInfo.top,
}
this.moveY = obj.y
this.moveX = obj.x
this.canvasTxt.beginPath()
this.canvasTxt.lineWidth = 2.2;
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.startY = obj.y
this.startX = obj.x
this.points.push(obj)
}
this.imgUrl=this.$refs.canvasF.toDataURL();
},
//移动结束
async touchEnd(ev) {
ev = ev || event
ev.preventDefault()
if (ev.touches.length == 1) {
let obj = {
x: ev.targetTouches[0].clientX - this.stageInfo.left,
y: ev.targetTouches[0].clientY - this.stageInfo.top,
}
this.canvasTxt.beginPath()
this.canvasTxt.lineWidth = 2.2;
this.canvasTxt.moveTo(this.startX, this.startY)
this.canvasTxt.lineTo(obj.x, obj.y)
this.canvasTxt.stroke()
this.canvasTxt.closePath()
this.points.push(obj)
}
this.senfOut(this.$refs.canvasF.toDataURL())
},
//导出生成的图片
async senfOut(base64,width,height){
// 通过子传父吧base64 发给父组件
this.$emit('base64img',(await this.resizedataURL(base64,300,120)).split(',')[1])
},
//修改图片大小
resizedataURL(datas, wantedWidth, wantedHeight){
return new Promise(async function(resolve,reject){
let img = document.createElement('img');
img.onload = function(){
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = wantedWidth;
canvas.height = wantedHeight;
ctx.drawImage(this, 0, 0, wantedWidth, wantedHeight);
let dataURI = canvas.toDataURL();
resolve(dataURI);
};
img.src = datas;
})
},
//重写
overwrite() {
this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height)
this.points = []
this.imgUrl=''
this.$emit('base64img','')
},
}
}
</script>
<style lang="scss" scoped>
.signSoard{
min-height: 29vh;
.signatureBox {
width: 100%;
height: calc(100% - 50px);
box-sizing: border-box;
overflow: hidden;
z-index: 100;
border: 1px solid #ddd;
background: #eee;
flex-direction: column;
}
.canvasBox {
// height: calc(65vh - .5rem);
box-sizing: border-box;
cancas{
// height: 300px;
width: 100%;
}
}
.imgCanvas{
background: #fff;
}
.btnBox {
padding: 10px;
text-align: center;
}
// .btnBox button:first-of-type {
// background: transparent;
// border-radius: 4px;
// height: 40px;
// width: 80px;
// font-size: 14px;
// }
// .btnBox button:last-of-type {
// background: #71b900;
// color: #fff;
// border-radius: 4px;
// height: 40px;
// width: 80px;
// font-size: 14px;
// }
// .zw{
// height: 1.5rem;
// background: #ccc;
// }
}
</style>
也有插件 ：官网
