用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")
用canvas实现手写签名功能的更多相关文章
- uni-app通过canvas实现手写签名
分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...
- canvas画布实现手写签名效果
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...
- Ionic5手写签名SignaturePad
测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...
- Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...
- 手把手集成web端手写公式功能
何为手写公式,很简单,就是在网页上可以写出数学公式,并能够生成Latex格式的字符串.废话不多说,直接走正题. 一.首先大家可以先去官网了解一下myscript这个插件 官方网站:https://de ...
- html5手写签名
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...
- 手写split功能
def split_new(stringstr, charstr): """ :param stringstr: 要分割的串 :param charst ...
- HTML5 中canvas支持触摸屏的签名面板
1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...
- WORD2003电子签名插件(支持手写、签章)
1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...
随机推荐
- 案例——UDP聊天
UDP聊天案例 做一个网络编程相关的案例,想着用利用UDP的快速且不用连接的优点做一个聊天室,我们一个聊天程序需要可以接收消息,也要可以发送消息,所以我们的DatagramSocket对象不但需要 ...
- js执行机制
js是单线程的,为什么可以执行异步操作呢? 这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的属性. 区分进程和线程: 进程:正在运行中的应用程序.每个进程都自己独立的内存空间.例如:打 ...
- PHP 日期之间所有日期
/** * 获取起止日期之间所有日期 * @param $sdate * @param $edate * @return array */ function get_dates($sdate, $ed ...
- VMware安装vmtools实现宿主机和虚拟机共享粘贴板
打开VMware以Ubuntu14.04.6为例,保持网络畅通,在线下载工具包 下载完成后dvd下出现该压缩包 将其复制到桌面并在桌面进入终端 执行命令: tar -zxvf xxxx.tar.gz ...
- linux系统的特殊符号
符号 作用 示例 # 注释符号,井号后的内容不会执行 echo #WORD ~ 当前用户的家目录 cd ~ ; 命令顺序执行,前面执行成功与否对后面没影响 COMMAND1 ; COMMAND2 &a ...
- Spring学习的第一天
Spring是以Ioc和Aop为内核,提供了表现层spring MVC 和持久层Spring JDBC等众多应用技术,还能整合开源世界众多著名的第三方框架和类库,成为使用最多的JavaEE企业应用开源 ...
- centos7 链路聚合+KVM桥接连网
一.两个物理网卡做链路聚合(em3,em4) 1)创建team类型的网卡,连接别名为team0,使用的模式为activebackup-主备/loadbalance-负载均衡nmcli con add ...
- vue element-ui父列表和子列表同时出现时的bug
在项目中遇到这样的问题 当第一个父列表下的子列表选择了1,切换到第二个父列表的时候,也会默认选择1 我最开始是计划通过修改子列表的default-active为-1,结果不行 后来发现出现这个问题的原 ...
- 记一次排查jacoco的过程:java.lang.NoSuchMethodException:ApplyOrderdetail.get$jacocoData()
一.事件: 公司BA今日在st2环境提测试单,添加产品时候一直过不去,找我帮忙看,因为关系比较熟,正好也不是非常忙,我就帮忙定位了下.首先,我在生产环境重现了下,没有问题,在dev环境重现,也没有问题 ...
- PHP 微信公众号/小程序获取openid,用户信息
1.获取code (获得openid的前置条件) 地址:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redi ...