用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的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...
随机推荐
- Mybatis的小技巧
一.使用resultMap字段关联对象属性太麻烦 eg:过于复杂,类似这种结果集转换的,只需要在配置文件中开启自动转换进行了,无需再手动写了很麻烦 替换办法:开启骆驼命名法进行匹配就ok了,实体类字段 ...
- activiti web流程设计器 工作流的 整合视频教程 SSM和独立部署
本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...
- TimeSpan的用法
TimeSpan的属性和方法: 下面的列表涵盖了其中的一部分: 属性: Add:与另一个TimeSpan值相加. Days: 返回用天数计算的TimeSpan值.Hours: 返回用小时计算的Time ...
- Hackme: 1: Vulnhub Walkthrough
下载链接: https://www.vulnhub.com/entry/hackme-1,330/ 网络扫描探测: ╰─ nmap -p1-65535 -sV -A 10.10.202.131 22/ ...
- 追踪SQL Server执行delete操作时候不同锁申请与释放的过程
一直以为很了解sqlserver的加锁过程,在分析一些特殊情况下的死锁之后,尤其是并发单表操作发生的死锁,对于加解锁的过程,有了一些重新的认识,之前的知识还是有一些盲区在里面的.delete加锁与解锁 ...
- SQL Server 之事务执行,让语句在事务中执行
BEGIN TRAN BEGIN TRY DELETE FROM dbo.表 INSERT INTO dbo.表( Id, 字段....) SELECTId,字段... F ...
- Linux命令详解 三
Linux用户和组的属性与权限本章结构1.用户账号和组账号概述2.用户账号和组账号管理3.查询账号信息4.查看目录或文件的属性5.设置目录或文件的权限6.设置目录或文件的归属 前言在linux中一切都 ...
- cURL无法访问TLS网站故障解决
大多数人都厌烦使用老旧的系统,无论软件还是硬件.但有的时候又不得不困守其中,坚持延续着系统的寿命,或者还需要点几柱香,祈求神佛的护佑. Linux是一个模块化极好的操作系统,得益于此,当其中有组件落伍 ...
- Spring源码解析-ioc容器的设计
Spring源码解析-ioc容器的设计 1 IoC容器系列的设计:BeanFactory和ApplicatioContext 在Spring容器中,主要分为两个主要的容器系列,一个是实现BeanFac ...
- center----Iframe 用法的详细讲解
把iframe解释成“浏览器中的浏览器“很是恰当 <iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 ...