<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

    </style>

</head>

<body>

<canvas></canvas>

<div>

    <button onclick="cancel()">取消</button>

    <button onclick="save()">保存</button>

</div>

</body>

<script>

    // 配置内容

    const config = {

        width: 400, // 宽度

        height: 200, // 高度

        lineWidth: 5, // 线宽

        strokeStyle: 'red', // 线条颜色

        lineCap: 'round', // 设置线条两端圆角

        lineJoin: 'round', // 线条交汇处圆角

    }

    // 获取canvas 实例

    const canvas = document.querySelector('canvas')

    // 设置宽高

    canvas.width = config.width

    canvas.height = config.height

    // 设置一个边框

    canvas.style.border = '1px solid #000'

    // 创建上下文

    const ctx = canvas.getContext('2d')

    // 设置填充背景色

    ctx.fillStyle = 'transparent'

    // 绘制填充矩形

    ctx.fillRect(

        0, // x 轴起始绘制位置

        0, // y 轴起始绘制位置

        config.width, // 宽度

        config.height // 高度

    );

    // 保存上次绘制的 坐标及偏移量

    const client = {

        offsetX: 0, // 偏移量

        offsetY: 0,

        endX: 0, // 坐标

        endY: 0

    }

    // 判断是否为移动端

    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent))

    // 初始化

    const init = event => {

        // 获取偏移量及坐标

        const {offsetX, offsetY, pageX, pageY} = mobileStatus ? event.changedTouches[0] : event

        // 修改上次的偏移量及坐标

        client.offsetX = offsetX

        client.offsetY = offsetY

        client.endX = pageX

        client.endY = pageY

        // 清除以上一次 beginPath 之后的所有路径，进行绘制

        ctx.beginPath()

        // 根据配置文件设置相应配置

        ctx.lineWidth = config.lineWidth

        ctx.strokeStyle = config.strokeStyle

        ctx.lineCap = config.lineCap

        ctx.lineJoin = config.lineJoin

        // 设置画线起始点位

        ctx.moveTo(client.endX, client.endY)

        // 监听 鼠标移动或手势移动

        window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw)

    }

    // 绘制

    const draw = event => {

        // 获取当前坐标点位

        const {pageX, pageY} = mobileStatus ? event.changedTouches[0] : event

        // 修改最后一次绘制的坐标点

        client.endX = pageX

        client.endY = pageY

        // 根据坐标点位移动添加线条

        ctx.lineTo(pageX, pageY)

        // 绘制

        ctx.stroke()

    }

    // 结束绘制

    const cloaseDraw = () => {

        // 结束绘制

        ctx.closePath()

        // 移除鼠标移动或手势移动监听器

        window.removeEventListener("mousemove", draw)

    }

    // 创建鼠标/手势按下监听器

    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", init)

    // 创建鼠标/手势 弹起/离开 监听器

    window.addEventListener(mobileStatus ? "touchend" : "mouseup", cloaseDraw)

    // 取消-清空画布

    const cancel = () => {

        // 清空当前画布上的所有绘制内容

        ctx.clearRect(0, 0, config.width, config.height)

    }

    // 保存-将画布内容保存为图片

    const save = () => {

        // 将canvas上的内容转成blob流

        canvas.toBlob(blob => {

            // 获取当前时间并转成字符串，用来当做文件名

            const date = Date.now().toString()

            // 创建一个 a 标签

            const a = document.createElement('a')

            // 设置 a 标签的下载文件名

            a.download = `${date}.png`

            // 设置 a 标签的跳转路径为 文件流地址

            a.href = URL.createObjectURL(blob)

            // 手动触发 a 标签的点击事件

            a.click()

            // 移除 a 标签

            a.remove()

        })

    }

</script>

</html>

　　

前端实现电子签名（web、移动端）通用组件的更多相关文章

  1. 饿了么基于Vue2.0的通用组件开发之路（分享会记录）

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  2. 前端文摘：Web 开发模式演变历史和趋势

    今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...

  3. Web服务端软件的服务品质概要

    软件品质概述 提供同样功能.产品和服务的服务者中, 竞争力来自功能的多样化和服务品质的差异化, 无论是个体.企业还是国家. 这里的服务指功能.产品的实现程度和处理能力,以及研发/客服提供的技术支持程度 ...

  4. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  5. JS前端图形化插件之利器Gojs组件（php中文网）

    JS前端图形化插件之利器Gojs组件(php中文网) 一.总结 一句话总结:php中文网我可以好好走一波 二.JS前端图形化插件之利器Gojs组件 参考: JS前端图形化插件之利器Gojs组件-js教 ...

  6. 关于如何提高Web服务端并发效率的异步编程技术

    最近我研究技术的一个重点是java的多线程开发,在我早期学习java的时候,很多书上把java的多线程开发标榜为简单易用,这个简单易用是以C语言作为参照的,不过我也没有使用过C语言开发过多线程,我只知 ...

  7. HT for Web的HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  8. Openstack的web管理端相关

    openstack的web管理端技术方面要关注的问题. 同步?异步 先说浏览器的同步和异步,我们知道的浏览器可以使用ajax实现异步请求,就是浏览器在请求数据的时候,我们管理员还能对浏览器就行其他操作 ...

  9. 从web移动端布局到react native布局

    在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'&g ...

  10. 【译】编写支持SSR的通用组件指南

    原文来自:https://blog.lichter.io/posts/the-guide-to-write-universal-ssr-ready-vue-compon?utm_campaign=Vu ...

随机推荐

  1. 分布式协议与算法-Paxos算法

    1.Basic Paxos 假设我们要实现一个分布式集群,这个集群是由节点 A.B.C 组成,提供只读 KV 存储服务.你应该知道,创建只读变量的时候,必须要对它进行赋值,而且这个值后续没办法修改.因 ...

  2. 分布式事务 | 使用 dotnetcore/CAP 的本地消息表模式

    本地消息表模式 本地消息表模式,其作为柔性事务的一种,核心是将一个分布式事务拆分为多个本地事务,事务之间通过事件消息衔接,事件消息和上个事务共用一个本地事务存储到本地消息表,再通过定时任务轮询本地消息 ...

  3. OnionArch 2.0 - 基于DDD的洋葱架构改进版开源

    大家好,去年我发布了一篇 OnionArch - 采用DDD+CQRS+.Net 7.0实现的洋葱架构.很多程序员都比较感兴趣,给我要源代码.这次我把OnionArch进行了升级,改进了一些特性,并放 ...

  4. 动态代理-cglib分析

    生成代理类文件的方式 jvm添加此启动参数,后面就是代理类class生成的地址 -Dcglib.debugLocation=~/baldhead/java/dynamic-proxy-cglib/sr ...

  5. 12月20日内容总结——ajax补充知识点、多对多外键的三种创建方式、django内置序列化组件、批量操作数据、分页器推导思路与自定义分页器的使用、form组件

    目录 一.ajax补充说明 二.多对多三种创建方式 三.django内置序列化组件(drf前身) 四.批量操作数据 五.分页器思路 六.自定义分页器的使用 七.form组件 forms组件介绍 For ...

  6. JSP第十次作业

    1.实现 删除 回复邮件2.实现阅读邮件功能:在main.jsp中点击任意邮件的标题,进入到detail.jsp显示邮件详情,包括发件人,主题,内容,时间.同时需要把邮件状态修改为已读. com.gd ...

  7. 微信小程序wx.navigateTo跳转参数大小超出限制问题

    微信小程序的跳转方式 wx.navigateTo(Object):保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页(新页面入栈) wx.redirectTo( ...

  8. P6329 【模板】点分树 | 震波

    \(\text{Solution}\) 点分树就是将点分治过程中的重心连成一棵虚树 对点分树子树信息的记录,就是点分治处理每个重心时需要的信息 这样就可以留下点分治的过程,支持多次修改和查询 点分树树 ...

  9. 打印出来的数据{ob: observer}、vue 中 [__ob__: Observer]问题

    问题效果: 理想效果: 解决方案:JSON.parse(JSON.stringify( ob )) 首先我们要把这个数据获取原始数据 JSON.stringify([data])   变成字符串 然后 ...

  10. 基于IGServer的Web地图要素增删改查

    1. 引言 MapGIS IGServer 是中地数码的一款跨平台GIS 服务器产品,提供了空间数据管理.分析.可视化及共享服务 MapGIS IGServer的下载(试用)地址:MapGIS IGS ...