利用 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. sqlserver 索引优化 CPU占用过高 执行分析 服务器检查[转]

    SELECT TOP 10 [Total Cost] = ROUND(avg_total_user_cost * avg_user_impact * (user_seeks + user_scans) ...

  2. OpenPCDet复现过程记录

    0.前言 OpenPCDet项目之前我就复现过,一个很优秀的项目,这几天又需要用到这个项目,再次复现遇到了不少问题,特此记录复现的流程 1.环境准备 1.1.前置条件 以下是我安装的版本 CUDA 1 ...

  3. 使用Golang的协程竟然变慢了｜100万个协程的归并排序耗时分析

    前言 这篇文章将用三个版本的归并排序,为大家分析使用协程排序的时间开销(被排序的切片长度由128到1000w) 本期demo地址:https://github.com/BaiZe1998/go-lea ...

  4. 分布式缓存应用场景与redis持久化机制

    redis 参考目录: 生产级Redis 高并发分布式锁实战1:高并发分布式锁如何实现 https://www.cnblogs.com/yizhiamumu/p/16556153.html 生产级Re ...

  5. C++源码中司空见惯的PIMPL是什么？

    前言: C++源码中司空见惯的PIMPL是什么?用原始指针.std::unique_ptr和std::shared_ptr指向Implementation,会有什么不同?优缺点是什么?读完这篇文章,相 ...

  6. 欢迎加入d3shop，一个DDD实战项目

    背景 整个<老肖的领域驱动设计之路>系列关于认知的核心部分已经基本闭环,但纸上得来终觉浅,还是需要通过实际操作来体会和验证我们的观点,接下来,我将通过一个实战项目来带着大家一起体验从需求到 ...

  7. 痛定思痛，好好做人，从头过一遍PyTorch框架(一)(1.深度学习简介、2.预备知识)

    现在是2024年2月24日,13:59,从研一就开始断断续续说要过一遍框架,到现在博一下学期,还一直拖着呢,拖延症太可怕啦,决定好好做人,不拖了,就从现在开始,好好过一遍,呜呜呜呜呜呜呜呜,(罪该万死 ...

  8. face-api.js 学习笔记

    参考 Build Real Time Face Detection With JavaScript (youtube get started) face-api.js - JavaScript API ...

  9. BOOT跳转APP，STM32F4正常，但是GD32F4起不来的问题

    问题描述:  stm32F4可以正常从BOOT跳转执行APP,到了GD32F4,卡死在APP程序的这里.  临时解决办法: APP程序内 把这两句代码都屏蔽掉就好了. 相关资料搜索: 最佳解决方案: ...

  10. Vscode 远程切换Python虚拟环境

    在VSCode中远程切换Python虚拟环境是一个涉及多个步骤的过程,包括安装必要的扩展.连接到远程服务器.创建或激活虚拟环境,并在VSCode中选择相应的Python解释器.以下是一个详细的步骤指南 ...