仅仅为了记录下踩过的坑 如果能帮到你 请留言点赞 哈哈
话不多说上代码
<template>
<view>
<view class="signature">
<view id="canvas">
</view>
</view>
<u-button id="clear" @click="clear">重新签名</u-button>
<u-button id="save" @click="saveSign">确定保存</u-button>
<view class="img">
<image :src="src" style="width: 740rpx;height: 600rpx;"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
src: '',
time1: '',
time2: ''
};
},
onReady() {
this.init_lineCanvas();
},
methods: {
// 保存签名
saveSign() {
this.time1 = setTimeout(() => {
this.src = sessionStorage.getItem("imgBase64");
console.log(this.src)
/* 电子签名base64图片上传*/
//接口上传
}, 500);
},
init_lineCanvas() {
document.addEventListener(
"touchmove",
function(event) {
event.preventDefault();
},
{ passive: false }
);
new this.lineCanvas({
el: document.getElementById("canvas"), // 绘制canvas的父级div
clearEl: document.getElementById("clear"), // 清除按钮
saveEl: document.getElementById("save"), // 保存按钮
linewidth: 3, // 线条粗细,选填
color: "black", // 线条颜色,选填
background: "#ffffff" ,// 线条背景,选填,
url: this.src
});
},
/* 电子签名手写板 */
lineCanvas(obj) {
this.linewidth = 1;
this.color = "#000000";
this.background = "#ffffff";
for (var i in obj) {
this[i] = obj[i];
}
this.canvas = document.createElement("canvas");
this.el.appendChild(this.canvas);
this.cxt = this.canvas.getContext("2d");
// this.ctx = uni.createCanvasContext('canvas')
this.canvas.width = 370;
this.canvas.height = 307;
this.cxt.fillStyle = this.background;
this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
this.cxt.strokeStyle = this.color;
this.cxt.lineWidth = this.linewidth;
this.cxt.lineCap = "round";
this.time2 = setTimeout(()=>{
// 开始绘制
this.canvas.addEventListener(
"touchstart",
function(e) {
console.log('开始绘制')
this.cxt.beginPath();
this.cxt.moveTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
}.bind(this),
false
);
// 绘制中
this.canvas.addEventListener(
"touchmove",
function(e) {
this.cxt.lineTo(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
this.cxt.stroke();
}.bind(this),
false
);
// 结束绘制
this.canvas.addEventListener(
"touchend",
function() {
console.log('结束绘制')
this.cxt.closePath();
}.bind(this),
false
);
} ,200)
// 清除画布
document.getElementById("clear").addEventListener(
"click",
function() {
console.log('清除画布')
this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
}.bind(this),
false
);
document.getElementById("clear").click();
// 保存图片,直接转base64
document.getElementById("save").addEventListener(
"click",
()=> {
var imgBase64 = this.canvas.toDataURL();
console.log("保存签名成功" + imgBase64);
sessionStorage.setItem("imgBase64", imgBase64);
// console.log(this)
},
false
);
},
clear() {
this.src = ''
clearTimeout(this.time1,this.time2)
},
}
};
</script>
<style>
.signature {
width: 100%;
height: 600rpx;
background: #fff;
margin-top: 10rpx;
margin-bottom: 20rpx;
position: relative;
padding-top: 20rpx;
}
#canvas canvas {
display: block;
background: #f3f3f3;
border-radius: 16rpx;
margin: 0 auto;
}
.img {
width: 740rpx;
height: 600rpx;
}
</style>
至于为什么加了一些延时器 相信大牛能懂 因为addEventListener 为null获取不到dom元素