前端实现手写签名

1.canvas实现手写签名

目前项目需求为签名在一张图片上，使用canvas就需要先把图片渲染在画板上，然后根据鼠标移动事件连接点位从而组成签名，最后导出为图片。

初始化

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

图片引入和加载

const image = new Image()
// 2 引入图片
image.src = '图片地址'
// 3 等待图片加载完成
image.onload = () => {
// 4 使用 drawImage() 方法渲染图片
this.ctx.drawImage(image, 0, 0,800,1000)
}
/*
    drawImage(image, dx, dy, dw, dh)
    image: 要渲染的图片对象。
    dx: 图片左上角的横坐标位置。
    dy: 图片左上角的纵坐标位置。
    dw 用来定义图片的宽度，dh 定义图片的高度。
*/

鼠标移动时绘制

使用的是一个开关，确定鼠标按下才能监听移动，移动时进行添加线条和绘制，鼠标抬起时关闭开关，不再绘制

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;
           // 结束绘制
        });

保存图片并下载

 this.cvs.toBlob(function(blob){
                const date = Date.now().toString()
                // 创建一个 a 标签
                const a = document.createElement('a')
                // 设置 a 标签的下载文件名
                a.download = `aaa.png`
                // 设置 a 标签的跳转路径为 文件流地址
                a.href = URL.createObjectURL(blob)
                // 手动触发 a 标签的点击事件
                a.click()
                // 移除 a 标签
                a.remove()
                }, 'image/png');

toBlob 方法将画布绘制的图像转换为 blob

注意canvas被污染

基于同域的安全协议,canvas里只要绘制了一张其他域的图片,就会变成"脏"画布,将不能使用toBlob,toDataURL输出内容.除非引入的图片在其服务器上是允许跨域的，可以使用

image.crossOrigin = 'Anonymous';

清除当前画布内容

this.ctx.clearRect(0, 0, 800, 1000)
//只清除之后下次写会显现之前的内容，所以要把路径消除
this.ctx.beginPath();