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
                },
                mobileStatus: false
            }
        },
        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 // 高度
            )
            this.mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent)) // 判断是否为移动端

            // 创建鼠标/手势按下监听器
            window.addEventListener(this.mobileStatus ? 'touchstart' : 'mousedown', this.initCanvas)
            // 创建鼠标/手势 弹起/离开 监听器
            window.addEventListener(this.mobileStatus ? 'touchend' : 'mouseup', this.cloaseDraw)
        },
        watch: {},
        methods: {
            initCanvas (event) {
                // 获取偏移量及坐标
                const { offsetX, offsetY, pageX, pageY } = this.mobileStatus ? event.changedTouches[0] : 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(this.mobileStatus ? 'touchmove' : 'mousemove', this.draw)
            },
            draw (event) {
                // 获取当前坐标点位
                const { pageX, pageY } = this.mobileStatus ? event.changedTouches[0] : 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>