利用 canvas 实现签名效果

使用插件  jSignature  github：https://github.com/brinley/jSignature

如果再H5 中使用需要加载  flashcanvas.js

方法：

方法名称 使用方法 说明
clear .jSignature("clear") 清空并重置画布
getData .jSignature("getData", "base30") 将画布转换为base64编码的数据字符串，可以在表单发布或提交时将其保存为任何数据库中的字符串
importData .jSignature("importData",dataurl) 使用从上述getData方法提取的数据URL更新现有的jSignature画布

选项参数：

参数名称 说明 默认值
width 定义画布的宽度。 没有％或px的数值（新版是可以使用百分比和px后缀的） 250
height 定义画布的高度。 没有％或px的数值（新版是可以使用百分比和px后缀的） 150
color 定义画布上笔画的颜色。 接受任何颜色十六进制值 #000
background-color 定义画布的背景颜色。 接受任何颜色十六进制值 #fff
lineWidth 定义线的厚度。 接受任何正数值（也是默认画布的横线的画笔的宽度） 1
cssclass 定义画布的自定义css类 None 
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

	<meta charset="utf-8">

	<meta name="renderer" content="webkit"/>

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

	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

	<script src="libs/jquery.js"></script>

	<script type="text/javascript" src="libs/flashcanvas.js"></script><![endif]-->

	<style>

		html,body{

			height: 100%;

			margin: 0;

			padding: 0;

		}

		#signature{

			border: 2px solid #ccc;

			background-color:lightgrey;

		}

		.btn-package{

			position: absolute;

			top:10px;

			right: 10px;

		}

	</style>

</head>

<body>

<div id="signature"></div>

<div class="btn-package">

	<button class="reset">清除</button>

	<button class="get">获取</button>

</div>

<script src="libs/jSignature.min.js"></script>

<script>

	$(document).ready(function() {

		var $sigdiv = $("#signature")

		var h = $(window).height()-8;

		var sw = $(document.body).width()-4;

		console.log(sw);

		console.log(h);

		$sigdiv.jSignature({

			color: "#000",

			height: h,

			width: sw,

			lineWidth:3,

			"background-color": "#fff"

		});

		$('.reset').click(function(){

			$sigdiv.jSignature("reset")

		})

		$('.get').click(function(){

			var data = $sigdiv.jSignature('getData', 'image');

			var src = "data:" + data[0] + "," + data[1];

			console.log(src);

		})

	})

</script>

<script>

</script>

</body>

</html>

　　最后效果

利用 canvas 实现签名效果的更多相关文章

  1. canvas 实现签名效果

    效果图 概述 在线签名,现在在很多场景下都能看到,而且在移动端见的比较多. 用canvas和svg都可以实现,而且跨平台能力也很好. canvas基于像素,提供 2D 绘制函数,提供的功能更原始,适合 ...

  2. 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

    利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...

  3. canvas实现倒计时效果示例（vue组件内编写）

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  4. 10分钟，利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  5. Android利用canvas画各种图形

    Android利用canvas画各种图形(点.直线.弧.圆.椭圆.文字.矩形.多边形.曲线.圆角矩形) 本文链接:https://blog.csdn.net/rhljiayou/article/det ...

  6. 小程序利用canvas 绘制图案 （生成海报， 生成有特色的头像）

    小程序利用canvas 绘制图案 (生成海报, 生成有特色的头像) 微信小程序生成特色头像,海报等是比较常见的.下面我来介绍下实现该类小程序的过程. 首先选择前端来通过 canvas 绘制.这样比较节 ...

  7. 利用 canvas 破解 某拖动验证码

    利用 canvas 破解 某拖动验证码 http://my.oschina.net/u/237940/blog/337194

  8. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  9. 利用canvas实现的中点Bresenham算法

    Bresenham提出的直线生成算法的基本原理是,每次在最大位移方向上走一步,而另一个方向是走步还是不走步取决于误差项的判别,具体的实现过程大家可以去问度娘.我主要是利用canvas画布技术实现了这个 ...

  10. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

随机推荐

  1. JavaScript魔法：在线Excel附件上传与下载的完美解决方案

    最新技术资源(建议收藏) https://www.grapecity.com.cn/resources/ 前言 在本地使用Excel时,经常会有需要在Excel中添加一些附件文件的需求,例如在Exce ...

  2. 使用 onBeforeRouteLeave 组合式函数提升应用的用户体验

    title: 使用 onBeforeRouteLeave 组合式函数提升应用的用户体验 date: 2024/8/14 updated: 2024/8/14 author: cmdragon exce ...

  3. mysql数据库中decimal数据类型比较大小

    在MySQL中,DECIMAL数据类型用于存储精确的数值,它非常适合用于需要高精度计算的场景,如金融应用.当我们需要在MySQL数据库中比较DECIMAL类型数据的大小时,可以使用标准的比较运算符,如 ...

  4. mybatis打印sql 转

    我们在使用mybatis开发过程中,经常需要打印sql以及输入输出,下面说一下mybatis结合log4j打印sql的. 1.添加mybatis配置 mybatis的日志打印方式比较多,SLF4J | ...

  5. k8s资源预留

    Kubernetes 的节点可以按照 Capacity 调度.默认情况下 pod 能够使用节点全部可用容量. 这是个问题,因为节点自己通常运行了不少驱动 OS 和 Kubernetes 的系统守护进程 ...

  6. Linux CentOS 7 安装 Kafka 2.8.2 - 单机版 & JDK 11 & 切换 JDK版本

    目录 安装 JDK 11 安装 Kafka 下载 Kafka 2.8.2 防火墙 修改配置 运行测试 自启动 验证端口 Kafka 从 2.6.0 开始,默认使用 Java 11 , 3.0.0 开始 ...

  7. 【Azure Policy】添加策略用于审计Azure 网络安全组(NSG)规则 -- 只能特定的IP地址允许3389/22端口访问

    问题描述 对Azure上的虚拟机资源,需要进行安全管理.只有指定的IP地址才能够通过RDP/SSH远程到虚拟机上, 有如下几点考虑: 1) 使用Azure Policy服务,扫描订阅中全部的网络安全组 ...

  8. WiFi基础(二)：最新WiFi信道、无线OSI模型与802.11b/g/n

    liwen01 2024.09.01 前言 最近十几年,通信技术发展迅猛,通信标准更新频繁,有的设备还在使用 802.11/b/g/n 协议,有的已支持到 WiFi6.WiFi7. 而国内有关无线 W ...

  9. 【YashanDB知识库】virt虚拟内存远大于res内存问题分析

    YASDB内存占用简介 参数配置: 默认参数配置:DBMS_PARAM高级包生成配置参数 数据库内存配置,使用默认参数步骤: 1.DBMS_PARAM.OPTIMIZE(); //生成默认参数,使用总 ...

  10. EF Core – Table / Entity Splitting

    参考 Docs – Advanced table mapping Table Splitting Table Splitting 指的是把一个表映射到多个 Entity,或者反过来说就是把多个 Ent ...