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 相关文章推荐
JavaScript中的Math 使用介绍
Apr 21 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
vue路由中前进后退的一些事儿
May 18 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
星际实力自我测试
2020/03/04 星际争霸
探讨php中防止SQL注入最好的方法是什么
2013/06/10 PHP
php实现统计邮件大小的方法
2013/08/06 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
2015/08/28 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
JavaScript 字符串常用操作小结(非常实用)
2016/11/30 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
python中二维阵列的变换实例
2014/10/09 Python
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python中的itertools的使用详解
2020/01/13 Python
详解Python 函数参数的拆解
2020/09/02 Python
python中如何打包用户自定义模块
2020/09/23 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
党章培训心得体会
2014/09/04 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
法律讲堂观后感
2015/06/11 职场文书