html，css，js实现电子点名绘制和下载

场景：

公司申请vpn网络，需要提交一个pdf，有电子签名。我们可以手写拍照，然后借助ps或者wps对图片进行处理，抠出名字，背景设为透明，但是这样似乎很麻烦，而且对于没有这两个软件操作经验的小白来说还是有点困难的。

我想，最终我们是要得到一张图片的嘛，那么js是可以通过canvas生成图片的，那么不如用canvas做一个可以生成电子签名的程序。

实现思路：

1、有一张画布，有两个按钮，一是导出，而是清除画布

2、获取画布的上下文对象，绑定鼠标事件。鼠标按下时，在移动的过程中去绘制线，鼠标抬起的时候停止绘制。

代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>签名</title>
    <style>
        #cvs {
            border: 1px solid #000;
            width: 640px;
            height: 400px;
            position: absolute;
            top:0;
            left:0;
            z-index:-1;
        }
    </style>
</head>

<body>
    <!-- <div>123</div> -->
    <canvas id="cvs" width="640" height="400"></canvas>
    <button id="btn1">下载</button>
    <button id="btn2">清除</button>
</body>
<script>

    // 获取canvas 实例
    this.cvs = document.getElementById('cvs');
    //获取Context对象（渲染实例）
    this.ctx = this.cvs.getContext('2d');


    // const image = new Image()
    // // 2 引入图片
    // image.src = './huge.jpg'
    // // image.crossOrigin = 'Anonymous';
    // // 3 等待图片加载完成
    // image.onload = () => {
    //     // 4 使用 drawImage() 方法渲染图片
    //     this.ctx.drawImage(image, 0, 0, 640, 400)
    // }
    console.log(this.ctx)


    this.cvs.addEventListener('mousedown', e => {
        this.isDrawing = true;
        this.ctx.moveTo(e.pageX, e.pageY)
    });
    //鼠标移动事件
    this.cvs.addEventListener('mousemove', e => {
        if (this.isDrawing) {
            this.ctx.lineTo(e.pageX, e.pageY);
            this.ctx.stroke();
        }
    });
    //鼠标抬起事件
    this.cvs.addEventListener('mouseup', e => {
        this.isDrawing = false;
        // 结束绘制
    });

    document.getElementById('btn1').addEventListener('click', () => {
        console.log('点击了下载按钮')
        this.cvs.toBlob(function (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()
        }, 'image/png');
    })
    document.getElementById('btn2').addEventListener('click', () => {
        this.ctx.clearRect(0, 0, 800, 1000)
        //只清除之后下次写会显现之前的内容，所以要把路径消除
        this.ctx.beginPath();
    })


</script>

</html>

效果图：

导出后效果：