<!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. vue 解决循环引用组件/动态组件/组件未注册报错

    使用动态组件报错 Unknown custom element: - did you register the component correctly? For recursive component ...

  2. 聊一聊HTTPS双向认证的简单应用

    目录 背景 准备工作 ASP.NET Core nginx 反向代理 IIS 部署 总结 参考资料 背景 在三方接口对接中,偶尔会遇到需要传递证书的情况,这种方式其实是在SSL握手过程中会同时验证客户 ...

  3. 安卓逆向 JNI实先java与C互通

    先来一张吊图 jdk_1.6.0_43/include/jni.h  这个头文件的地址 头文件分布 我们需要熟悉的 反射获取java中的类 1.jclass/类型 (JNICALL *FindClas ...

  4. C4模型，架构设计图的脚手架，你值得拥有

    hi,我是熵减,见字如面. 对于软件开发团队来说,写软件设计文档,花架构图,是日常工作中的关键一项. 而其中,如何画好系统设计的架构图呢? Simon Brown 就 提出 C4 模型,来解决这个问题 ...

  5. VScode本地搭建服务代码如何让其他人访问？

    如本地开发域名访问: http://127.0.0.1:5500/pages/information/information.html?id=2259 想让别人访问: win+R -------> ...

  6. Canvas：路径

    路径的概念 路径是从起始点到结束点之间的连线.个人认为,二维画布中分为线性图形和非线性图形,线性图形包括矩形.直线.曲线.圆形等各种几何图形:非线性图形包括图象.文本.像素.线性图形中又分为路径和非路 ...

  7. 常用的hive sql

    细节:sql 中有涉及到正则匹配函数的,要注意转义符号 因为在不同语言下正则匹配规则是否需要加转义符号是不同的,举例,regexp_replace 函数,在hive sql的正则匹配规则的 \d+ 需 ...

  8. LeetCode-28 实现strStr() KMP算法的学习

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/repeated-string-match 题目描述 给定两个字符串 a 和 b,寻找重复叠加字符 ...

  9. 【MySQL速通篇001】5000字吃透MySQL部分重要知识点

    写在前面 这篇5000多字博客也花了我几天的时间,主要是我对MySQL一部分重要知识点的理解[后面当然还会写博客补充噻,欢迎关注我哟],当然这篇文章可能也会有不恰当的地方[毕竟也写了这么多字,错别字可 ...

  10. 简述traceroute命令的原理

    原理 traceroute命令是一种用于显示数据包从源主机到目的主机经过的路由器和网络设备的路径的工具.traceroute命令的原理是利用IP数据报的生存时间(TTL)字段和因特网控制报文协议(IC ...