用canvas实现手写签名功能

简介: 用canvas实现手写签名功能

更多文章

最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 base64 码放在服务器。

这样的需求用 canvas 实现是最好的。

需要用到 canvas 的以下几个属性:

  • beginPath 创建一个新的路径
  • globalAlpha 设置图形和图片透明度的属性
  • lineWidth 设置线段厚度的属性(即线段的宽度)
  • strokeStyle 描述画笔(绘制图形)颜色或者样式的属性,默认值是 #000 (black)
  • moveTo(x, y) 将一个新的子路径的起始点移动到(x,y)坐标的方法
  • lineTo(x, y) 使用直线连接子路径的终点到x,y坐标的方法(并不会真正地绘制)
  • closePath 它尝试从当前点到起始点绘制一条直线
  • stroke 它会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径,默认颜色是黑色

除了用到这些属性外,还需要监听鼠标点击和鼠标移动事件。

废话就不多说了,直接上代码DEMO

我对代码做了扩展,除了支持画笔,还支持喷枪、刷子、橡皮擦功能。

canvas 转成图片

将 canvas 转成图片,需要用到以下属性:

  • toDataURL

canvas.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。

const image = new Image()
    // canvas.toDataURL 返回的是一串Base64编码的URL
    image.src = canvas.toDataURL("image/png")
目录
相关文章
|
6月前
|
前端开发 小程序 JavaScript
微信小程序canvas手写签字
微信小程序canvas手写签字
87 0
|
23天前
|
移动开发 前端开发 JavaScript
页面手写签名实现:利用Canvas技术将签名保存为图片
页面手写签名实现:利用Canvas技术将签名保存为图片
68 0
|
3月前
|
小程序
手写签名-微信小程序
手写签名-微信小程序
53 1
|
5月前
|
XML JavaScript 前端开发
基于SVG的web页面图形绘制API介绍
基于SVG的web页面图形绘制API介绍
69 4
|
JavaScript 前端开发
JavaScript实现手写签名,可触屏手写,支持移动端与PC端双端保存
JavaScript实现手写签名,可触屏手写,支持移动端与PC端双端保存
175 0
|
6月前
|
移动开发 前端开发 JavaScript
JavaScript实现的复杂功能:自动生成带水印的图片
JavaScript实现的复杂功能:自动生成带水印的图片
|
12月前
|
小程序 前端开发 JavaScript
小程序调用图片接口API并居中显示
小程序调用图片接口API并居中显示
59 0
|
移动开发 前端开发 JavaScript
关于canvas使用api汇总
关于canvas使用api汇总
uniapp小程序实现横屏手写签名(整理)
uniapp小程序实现横屏手写签名(整理)
|
存储 前端开发 小程序
小程序封装手写签名组件
本文详细介绍了如何封装一个小程序手写签名组件,包括签名、保存签名、清除签名和撤销功能。我们使用了 canvas 来实现手写签名功能,通过自定义组件的方式来封装手写签名组件,使其可以在不同的页面中重复使用。同时,我们使用了面向对象的编程方式,将手写签名的逻辑封装在一个signaImage类中,使代码更加清晰易懂。最后希望能帮助大家更好地理解和使用本文介绍的手写签名组件。
650 0