前端实现手写签名

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();

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！