jq-signature是一款基于HTML5 canvas的支持移动触摸设备的在线签名和涂鸦jQuery插件。可以使用该jQuery插件来制作在线签名或涂鸦板,用户绘制的东西可以用图片的形式保存下来,非常方便实用。
关于使用HTML5 canvas制作涂鸦板的方法,可以参考《使用html5 canvas制作涂鸦画板》,如何将绘制号的涂鸦图片上传到服务器可以参考《HTML5 canvas画图及图片上传服务器》。
使用方法
使用该签名插件要引入jQuery和jq-signature.js文件。
< script src = "jquery/1.11.0/jquery.min.js" > script > < script src = "jq-signature.js" > script > |
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 > |
你可以使用一个空的来显示保存的签名图片。
初始化插件
在页面加载完毕之后使用下面的方法来初始化该签名插件。
$(document).on( 'ready' , function () { $( '.js-signature' ).jqSignature(); }); function clearCanvas() { $( '#signature' ).html( 'Your signature will appear here when you click "Save Signature" ' ); $( '.js-signature' ).jqSignature( 'clearCanvas' ); $( '#saveBtn' ).attr( 'disabled' , true ); } function saveSignature() { $( '#signature' ).empty(); var dataUrl = $( '.js-signature' ).jqSignature( 'getDataURL' ); var img = $( '' ).attr( 'src' , dataUrl); $( '#signature' ).append($( '' ).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- |
$().jqSignature({width: 600}); |
Height |
签名canvas的高度,单位像素,默认值100 |
data- |
$().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- |
$().jqSignature({lineWidth: 2}); |
Auto Fit |
使canvas占满父元素的宽度,默认值false |
data-auto-fit="true" |
$().jqSignature({autoFit: true}); |