-
canvas 实现电子签名
坑点：不能直接在css中设置canvas的width, height，否则画布中鼠标定位不准
代码如下：
<template>
<div class="layer" ref="layer" @touchmove.prevent>
<canvas
ref="canvas"
@touchstart="touchStart"
@touchmove="touchMove"
@touchend="touchEnd"
></canvas>
<div class="btn-box">
<Button type="primary" @click="submit()">去提交</Button>
<Button @click="clear()">清空</Button>
<slot></slot>
</div>
</div>
</template>
<style scoped lang="scss">
.layer {
padding: 20px;
height: calc(100vh);
}
canvas {
border: 1px solid #ccc;
}
.btn-box {
margin-top: 20px;
text-align: right;
button {
margin-left: 20px;
}
}
</style>
<script>
export default {
data() {
return {
// MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果
mql: null,
canvasWidth: null,
canvasHeight: null,
canvas: null,
ctx: null,
startX: 0,
startY: 0,
isSign: false,
}
},
mounted() {
this.$nextTick().then(() => {
this.canvas = this.$refs.canvas
this.ctx = this.canvas.getContext('2d')
this.ctx.lineWidth = 2
// 监听横竖屏切换事件
this.mql = window.matchMedia('(orientation: portrait)');
this.mql.addListener(this.handleOrientationChange);
this.handleOrientationChange()
});
},
beforeDestroy() {
this.mql.removeListener(this.handleOrientationChange);
},
methods: {
handleOrientationChange() {
let stageInfo = this.canvas.getBoundingClientRect()
this.startX = stageInfo.left
this.startY = stageInfo.top
// canvas画布，当改变画布的长度或者宽度时，画布的内容会消失
// 解决方案1：把变化之前的画布内容copy一份，然后重新画到画布上
const imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height)
this.canvas.width = this.$refs.layer.clientWidth - 40
this.canvas.height = this.$refs.layer.clientHeight - 100
this.ctx.putImageData(imgData, 0, 0)
// 解决方案2：创建一个新的canvas，把变化之前的画布内容copy到新canvas上，再把新canvas绘制到变化后的canvas上
// const nc = document.createElement('canvas')
// nc.width = this.canvas.width;
// nc.height = this.canvas.height;
// nc.getContext('2d').drawImage(this.canvas, 0, 0);
// this.canvas.width = this.$refs.layer.clientWidth - 40
// this.canvas.height = this.$refs.layer.clientHeight - 100
// this.ctx.drawImage(nc, 0, 0);
},
touchStart(event) {
this.ctx.beginPath()
this.ctx.moveTo(event.touches[0].pageX - this.startX, event.touches[0].pageY - this.startY)
},
touchMove(event) {
this.ctx.lineTo(event.touches[0].pageX - this.startX, event.touches[0].pageY - this.startY)
this.ctx.stroke()
},
touchEnd() {
this.ctx.closePath()
this.isSign = true
},
submit() {
if (!this.isSign) {
this.$Message.error('您还未签名！')
return
}
this.$emit('sign', this.canvas.toDataURL('image/png', 1))
},
//清除画布
clear() {
this.isSign = false
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
},
}
}
</script>
-
html2canvas
坑点：
- 若图片跨域，则截图空白，解决方案：图片服务器设置允许跨域，图片渲染设置跨域
<img crossOrigin="anonymous" :src="src + '?time=' + new Date().valueOf()" alt="" />
- 若页面有滚动条，则截图不全，解决方案：用一个
div维护需要转canvas的dom，触发下载时让页面回到顶部，下载完再回到相应位置（如底部：window.scrollBy(0, document.body.scrollHeight)）
getBase64() {
window.pageYOffset = 0
html2canvas(document.getElementById('declaration'), {
scale: 1,
allowTaint: false,
taintTest: false,
useCORS: true,
height: document.getElementById('declaration').clientHeight
}).then((canvas)=> {
console.log(canvas.toDataURL('image/png', 1))
});
},
