最近开发网站有一个需求,要求页面上有一块区域,用户能用鼠标在上面写字,并能保存成图片 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实现手写签名功能的更多相关文章

  1. uni-app通过canvas实现手写签名

    分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...

  2. canvas画布实现手写签名效果

    最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: <!--手写区--> <div class="mSign_signMa ...

  3. Ionic5手写签名SignaturePad

    测试程序下载:https://hanzhe.lanzous.com/itt47kncw3a 初始化项目 1. 首先新建一个Ionic5的项目: ionic start test-1 blank 2. ...

  4. Blazor组件自做二 : 使用JS隔离制作手写签名组件

    Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...

  5. 手把手集成web端手写公式功能

    何为手写公式,很简单,就是在网页上可以写出数学公式,并能够生成Latex格式的字符串.废话不多说,直接走正题. 一.首先大家可以先去官网了解一下myscript这个插件 官方网站:https://de ...

  6. html5手写签名

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta co ...

  7. 手写split功能

    def split_new(stringstr, charstr):    """    :param stringstr: 要分割的串    :param charst ...

  8. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  9. WORD2003电子签名插件(支持手写、签章)

    1.引言 WORD电子签名插件,支持手写.本地电子图章.以及网络图章功能.软件使用VC6,以ATL方式编写,软件小巧精致. 这是我学习ATL的成果,学习过程及程序的编写,前前后后共用了一个多月的时间, ...

随机推荐

  1. 案例——UDP聊天

    UDP聊天案例   做一个网络编程相关的案例,想着用利用UDP的快速且不用连接的优点做一个聊天室,我们一个聊天程序需要可以接收消息,也要可以发送消息,所以我们的DatagramSocket对象不但需要 ...

  2. js执行机制

    js是单线程的,为什么可以执行异步操作呢? 这归结与浏览器(js的宿主环境)通过某种方式使得js具备了异步的属性. 区分进程和线程: 进程:正在运行中的应用程序.每个进程都自己独立的内存空间.例如:打 ...

  3. PHP 日期之间所有日期

    /** * 获取起止日期之间所有日期 * @param $sdate * @param $edate * @return array */ function get_dates($sdate, $ed ...

  4. VMware安装vmtools实现宿主机和虚拟机共享粘贴板

    打开VMware以Ubuntu14.04.6为例,保持网络畅通,在线下载工具包 下载完成后dvd下出现该压缩包 将其复制到桌面并在桌面进入终端 执行命令: tar -zxvf xxxx.tar.gz ...

  5. linux系统的特殊符号

    符号 作用 示例 # 注释符号,井号后的内容不会执行 echo #WORD ~ 当前用户的家目录 cd ~ ; 命令顺序执行,前面执行成功与否对后面没影响 COMMAND1 ; COMMAND2 &a ...

  6. Spring学习的第一天

    Spring是以Ioc和Aop为内核,提供了表现层spring MVC 和持久层Spring JDBC等众多应用技术,还能整合开源世界众多著名的第三方框架和类库,成为使用最多的JavaEE企业应用开源 ...

  7. centos7 链路聚合+KVM桥接连网

    一.两个物理网卡做链路聚合(em3,em4) 1)创建team类型的网卡,连接别名为team0,使用的模式为activebackup-主备/loadbalance-负载均衡nmcli con add ...

  8. vue element-ui父列表和子列表同时出现时的bug

    在项目中遇到这样的问题 当第一个父列表下的子列表选择了1,切换到第二个父列表的时候,也会默认选择1 我最开始是计划通过修改子列表的default-active为-1,结果不行 后来发现出现这个问题的原 ...

  9. 记一次排查jacoco的过程:java.lang.NoSuchMethodException:ApplyOrderdetail.get$jacocoData()

    一.事件: 公司BA今日在st2环境提测试单,添加产品时候一直过不去,找我帮忙看,因为关系比较熟,正好也不是非常忙,我就帮忙定位了下.首先,我在生产环境重现了下,没有问题,在dev环境重现,也没有问题 ...

  10. PHP 微信公众号/小程序获取openid,用户信息

    1.获取code (获得openid的前置条件) 地址:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redi ...