html5+canvas实现支持触屏的签名插件教程


Posted in Javascript onMay 08, 2017

前言

大家在日常开发中使用该jQuery插件来制作在线签名,用户绘制的东西以图片的形式保存下来,非常方便实用。下面将实现支持的方法分享给大家,供大家参考学习,下面来一起看看详细的介绍吧。

方法如下:

使用该签名插件要引入jQuery和jq-signature.js文件。

<script src="jquery/1.11.0/jquery.min.js"></script>
<script src="jq-signature.js"></script>

html5+canvas实现支持触屏的签名插件教程

HTML结构

<!-- 创建一个签名区域,使用HTML5的data-option来传递一些参数 -->
<div class="js-signature" 
 data-width="600" 
 data-height="200" 
 data-border="1px solid #1ABC9C" 
 data-background="#16A085" 
 data-line-color="#fff" 
 data-auto-fit="true">
</div>
 
<!-- 创建两个操作按钮,分别用于清空画板和保存签名 -->
<button id="clearBtn" onclick="clearCanvas();">Clear Canvas</button>
<button id="saveBtn" onclick="saveSignature();" disabled>Save Signature</button>
 
<!-- 可以使用一个空的<div>来显示保存的签名图片 -->
<div id="signature"></div>

初始化插件

//页面加载完毕之后使用下面的方法来初始化该签名插件
$(document).on('ready', function() {
 $('.js-signature').jqSignature();
});
 
function clearCanvas() {
 $('#signature').html('<p><em>Your signature will appear here when you click "Save Signature"</em></p>');
 $('.js-signature').jqSignature('clearCanvas');
 $('#saveBtn').attr('disabled', true);
}
 
function saveSignature() {
 $('#signature').empty();
 var dataUrl = $('.js-signature').jqSignature('getDataURL');
 var img = $('<img>').attr('src', dataUrl);
 $('#signature').append($('<p>').text("Here's your signature:"));
 $('#signature').append(img);
}
 
$('.js-signature').on('jq.signature.changed', function() {
 $('#saveBtn').attr('disabled', false);
});

配置参数

下面是该签名插件的一些可用参数,这些参数可以同时在data-attributes上使用:

参数 描述 Data Attribute 示例
Width 签名canvas的宽度,单位像素,默认值300 data-width="600" $().jqSignature({width: 600});
Height 签名canvas的高度,单位像素,默认值100 data-height="200" $().jqSignature({height: 200});
Border 签名canvas的边框CSS样式。默认为'1px solid #AAAAAA' data-border="1px solid red" $().jqSignature({border: '1px solid red'});
Background 签名canvas的背景颜色,默认值为'#FFFFFF' data-background="#EEEEEE" $().jqSignature({background: '#EEEEEE'});
Line Color 签名的颜色。默认值为#222222' data-line-color="#ABCDEF" $().jqSignature({lineColor: '#ABCDEF'});
Line Width 签名的线宽,单位像素,默认值为1 data-line-width="2" $().jqSignature({lineWidth: 2});
Auto Fit 使canvas占满父元素的宽度,默认值false data-auto-fit="true" $().jqSignature({autoFit: true});

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
use jscript with List Proxy Server Information
Jun 11 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
js子页面获取父页面数据示例
May 15 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
js中unicode转码方法详解
Oct 09 Javascript
js性能优化技巧
Nov 29 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
JQuery实现图片轮播效果
May 08 #jQuery
jQuery中的deferred对象和extend方法详解
May 08 #jQuery
vue 2.0路由之路由嵌套示例详解
May 08 #Javascript
node.js中EJS 模板快速入门教程
May 08 #Javascript
详解用node-images 打造简易图片服务器
May 08 #Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 #Javascript
angular实现IM聊天图片发送实例
May 08 #Javascript
You might like
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
JavaScript手机振动API
2016/06/11 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
python操作sqlite的CRUD实例分析
2015/05/08 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
行政主管岗位职责
2013/11/18 职场文书
大学军训自我鉴定
2013/12/15 职场文书
小学教师师德感言
2014/02/10 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
单位租房协议书范本
2014/12/04 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书
八年级作文之友情
2019/11/25 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis