vue 前端canvas 签名 画图

管理员
<template>
<div class="main_analysis_content">
<canvas id="canvasId" style="background: yellow"></canvas>
<div>
<button @click="cancel()">取消</button>
<button @click="save()">保存</button>
</div>
</div>
</template>

<script>
export default {
components: { },
data () {
return {
config: {
width: 1500, // 宽度
height: 800, // 高度
lineWidth: 4, // 线宽
strokeStyle: '#010d32', // 线条颜色
lineCap: 'round', // 设置线条两端圆角
lineJoin: 'round' // 线条交汇处圆角
},
canvas: {},
ctx: {},
client: { // 保存上次绘制的 坐标及偏移量
offsetX: 0, // 偏移量
offsetY: 0,
endX: 0, // 坐标
endY: 0
}
}
},
created () {},
mounted () {
this.canvas = document.getElementById('canvasId')
this.canvas.width = this.config.width
this.canvas.height = this.config.height
// 设置一个边框
this.canvas.style.border = '1px solid #fff'
// 创建上下文
this.ctx = this.canvas.getContext('2d')
// 设置填充背景色
this.ctx.fillStyle = '#fff'
// 绘制填充矩形
this.ctx.fillRect(
0, // x 轴起始绘制位置
0, // y 轴起始绘制位置
this.config.width, // 宽度
this.config.height // 高度
)
// 创建鼠标/手势按下监听器
window.addEventListener('mousedown', this.initCanvas)
// 创建鼠标/手势 弹起/离开 监听器
window.addEventListener('mouseup', this.cloaseDraw)
},
watch: {},
methods: {
initCanvas (event) {
// 获取偏移量及坐标
const { offsetX, offsetY, pageX, pageY } = event

// 修改上次的偏移量及坐标
this.client.offsetX = offsetX
this.client.offsetY = offsetY
this.client.endX = pageX
this.client.endY = pageY

// 清除以上一次 beginPath 之后的所有路径,进行绘制
this.ctx.beginPath()
// 根据配置文件设置相应配置
this.ctx.lineWidth = this.config.lineWidth
this.ctx.strokeStyle = this.config.strokeStyle
this.ctx.lineCap = this.config.lineCap
this.ctx.lineJoin = this.config.lineJoin
// 设置画线起始点位
this.ctx.moveTo(this.client.endX - 20, this.client.endY - 70)
// 监听 鼠标移动或手势移动
window.addEventListener('mousemove', this.draw)
},
draw (event) {
// 获取当前坐标点位
const { pageX, pageY } = event
// 修改最后一次绘制的坐标点
this.client.endX = pageX - 20
this.client.endY = pageY - 70

// 根据坐标点位移动添加线条
this.ctx.lineTo(pageX - 20, pageY - 70)

// 绘制
this.ctx.stroke()
},
// 结束绘制
cloaseDraw () {
// 结束绘制
this.ctx.closePath()
// 移除鼠标移动或手势移动监听器
window.removeEventListener('mousemove', this.draw)
},
cancel () {
// 清空当前画布上的所有绘制内容
var c = document.getElementById('canvasId')
var cxt = c.getContext('2d')
cxt.fillStyle = '#fff'
cxt.beginPath()
cxt.fillRect(0, 0, c.width, c.height)
cxt.closePath()
},
save () {
// const baseUrl = this.canvas.toDataURL()
// 将canvas上的内容转成blob流
this.canvas.toBlob(blob => {
// 获取当前时间并转成字符串,用来当做文件名
const date = Date.now().toString()
// 创建一个 a 标签
const a = document.createElement('a')
// 设置 a 标签的下载文件名
a.download = `${date}.png`
// 设置 a 标签的跳转路径为 文件流地址
a.href = URL.createObjectURL(blob)
// 手动触发 a 标签的点击事件
a.click()
// 移除 a 标签
a.remove()
})
}
}
}
</script>
<style lang="less" scoped>
.main_analysis_content{
color: #fff;
}
</style>