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 定时器调用传递参数的方法
Nov 12 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
Feb 18 Javascript
微信小程序 页面跳转如何实现传值
Apr 05 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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
php下将XML转换为数组
2010/01/01 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
浅谈jQuery双事件多重加载的问题
2016/10/05 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
Vue项目打包部署到apache服务器的方法步骤
2021/02/01 Vue.js
Python常用内置函数总结
2015/02/08 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
基于python实现学生信息管理系统
2019/11/22 Python
python实现程序重启和系统重启方式
2020/04/16 Python
报社实习生自荐信
2014/01/24 职场文书
二年级语文教学反思
2014/02/02 职场文书
四年级科学教学反思
2014/02/10 职场文书
青春寄语大全
2014/04/09 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
通知范文怎么写
2015/04/16 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
MySQL三种方式实现递归查询
2022/04/18 MySQL
利用Python实时获取steam特惠游戏数据
2022/06/25 Python
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js