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>

效果图:

导出后效果:

相关推荐
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
Liudef065 小时前
2048小游戏实现
javascript·css·css3
独立开阀者_FwtCoder7 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句7 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom7 小时前
JavaScript reduce()函数详解
javascript
小飞悟8 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子8 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手8 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅8 小时前
JavaScript 中你不知道的按位运算
前端·javascript