页面大致长这个样子
注:如果直接使用代码,记得下载element的依赖包以及引入对应的样式,也可以将涉及到element组件的地方去掉
直接上代码:
<template>
<div class="sign_page">
<div class="canvas_page" >
<!---->
<div class="handCenter">
<canvas id="myCanvas" ></canvas>
</div>
<div class="reWriteBtnLine">
<el-button class="reWriteBtn" size="medium" type="primary" @click.stop="clearArea">重写</el-button>
<!-- <el-button class="reWriteBtn" size="medium" type="primary" @click.stop="saveImageInfo">获取图片临时链接</el-button> -->
</div>
</div>
<div class="button_line">
<!--按钮-->
<el-button type="primary" class="toPreStep reWriteBtn" @click="toPreStep">上一步</el-button>
<el-button type="primary" class="reWriteBtn" @click="toNextStep">上传签名</el-button>
</div>
</div>
</template>
<script>
let that = null;
export default {
data () {
return {
//判断是否在进行绘制动作
touchPressed:false,
//画布实体
ctx:null,
//线条的颜色
strokeStyle:'#000',
//线条的粗细
lineWidth:4,
lastX:null,
lastY:null,
canvas:null
}
},
mounted(){
that = this;
this.$nextTick(() => {
let canvas = document.getElementById('myCanvas');
this.canvas = canvas;
this.ctx = canvas.getContext('2d');
// let winW = window.innerWidth;
// let winH = window.innerHeight;
let node = document.getElementsByClassName('handCenter')[0];
let rect = node.getBoundingClientRect();
console.log(rect,'rect')
let winW = rect.width;
let winH = rect.height
canvas.width = winW;
canvas.height = winH;
//由于只要获得签名,所以不需要
// this.ctx.fillStyle = '#fff';
// this.ctx.fillRect(0,0,winW,winH);
this.Init()
});
},
methods:{
Init() {
this.canvas.addEventListener(
'touchstart',
(event)=> {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
this.touchPressed = true;
this.draw(touch.pageX - this.canvas.offsetLeft, touch.pageY - this.canvas.offsetTop, false);
}
},
false
);
this.canvas.addEventListener(
'touchmove',
(event) =>{
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,重要
var touch = event.targetTouches[0];
if (this.touchPressed) {
this.draw(touch.pageX - this.canvas.offsetLeft, touch.pageY - this.canvas.offsetTop, true);
}
}
},
false
);
this.canvas.addEventListener(
'touchend',
**(event)=> {
if (event.targetTouches.length == 1) {
event.preventDefault(); // 阻止浏览器默认事件,防止手写的时候拖动屏幕,重要
this.touchPressed = false;
}
},
false
);
},
//上一步
toPreStep(){
this.$router.go(-1)
},
//下一步
toNextStep(){
let res = this.ifDraw();
console.log(res)
if(res){
this.$message.warning('请写下你的签名')
return
}
this.$confirm('确认当前的签名无误且清晰?', '提示')
.then(() => {
console.log("上传签名")
let url = this.canvas.toDataURL();
let file = this.dataURLtoFile(url);
console.log(file)
//暂时使用直接下载
// this.openLoading()
this.saveImageInfo();
})
.catch(action => {
//console.log(action)
});
},
//转成 File 对象
dataURLtoFile(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
// 这里的 'share.png' 是自定义的文件名
return new File([u8arr], 'aa' + '.png',{ type: mime });
},
draw(x, y, isDown) {
let ctx = this.ctx
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = this.strokeStyle;
ctx.lineWidth = this.lineWidth;
ctx.lineJoin = "round";
ctx.moveTo(this.lastX, this.lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
this.lastX = x; this.lastY = y;
},
clearArea(){
this.ctx.setTransform(1, 0, 0, 1, 0, 0);
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
},
saveImageInfo(){
let a = document.createElement('a');
a.href = this.canvas.toDataURL();
//下面是下载的步骤
a.download = "sign";
a.click();
},
//判断是否绘制签名
ifDraw(){
var blank = document.createElement('canvas');
blank.width = this.canvas.width;
blank.height = this.canvas.height;**
return this.canvas.toDataURL() == blank.toDataURL();
},
}
}
</script>
<style scoped lang="scss">
.canvas_page{
width:100vw;
height:calc(100vh - 120px);
box-sizing: border-box;
.handCenter {
overflow: hidden;
max-width:90vw;
height: calc(60vh - 100px);
margin:0 auto;
margin-top: 30px;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
box-sizing: border-box;
}
}
</style>
<style lang="scss">
.reWriteBtnLine{
display: flex;
justify-content: center;
align-items: center;
padding:40px 0 0;
}
/*重写的按钮*/
.reWriteBtn{
padding: 0.2rem 0.4rem!important;
font-size:0.45rem!important;
text-align: center;
}
</style>
以上是这个demo的完整代码,下面是逐步的分解,做记录用:
that = this;
this.$nextTick(() => {
...
let node = document.getElementsByClassName('handCenter')[0];
let rect = node.getBoundingClientRect();
...
});
- 使用 getBoundingClientRect 方法 返回canvas外层容器 的大小及其相对于视口的位置,获得宽高,作为画布的宽高
- dataURLtoFile 将画布转为文件流,可以用于后续的上传
- 扩展 ,dataURLtoBlob 将画布转为blob流
//转成 blob 对象
dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
- 比对画布上是否有内容:
ifDraw(){
var blank = document.createElement('canvas');
blank.width = this.canvas.width;
blank.height = this.canvas.height;**
return this.canvas.toDataURL() == blank.toDataURL();
}