前言

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

方法如下：

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

脚本src=' http : jquery/1。11 .0/jquery。量滴js /脚本脚本src=' http : jq-signature。js /脚本

超文本标记语言结构

！-创建一个签名区域，使用HTML5的数据选项来传递一些参数-div class=' js-signature ' data-width=' 600 ' data-height=' 200 ' data-border=' 1px solid # 1ab c9c ' data-background=' # 16a 085 ' data-line-color=' # fff ' data-auto-fit=' true '/div！-创建两个操作按钮，分别用于清空画板和保存签名-button id=' clearBtn ' onclick=' clearCanvas()；'清除画布/按钮按钮id=' SaveBtn ' onclick=' SaveSignature()；'禁用保存签名/按钮！-可以使用一个空的差异来显示保存的签名图片- div id='签名/div初始化插件

//页面加载完毕之后使用下面的方法来初始化该签名插件$(文档)。on('ready '，function() { $(').js-signature ').jqSignature()；});函数clearCanvas() { $('#signature ').html(“”当您单击'保存签名/em/p '时，您的签名将出现在此处；$('.js-signature ').jqSignature(' clearCanvas ')；$('#saveBtn ').attr('disabled '，true)；}函数saveSignature() { $('#signature ').empty()；var dataUrl=$(' .js-signature ').jqSignature(' GetDataURl ')；var img=$('img ').attr('src '，DataURl)；$(“# signature”).追加($('p ').文字('这是你的签名： ');$(“# signature”).追加(img)；} $('.js-signature ').on('jq.signature.changed '，function() { $('#saveBtn ').attr('disabled '，false)；});配置参数

下面是该签名插件的一些可用参数，这些参数可以同时在数据属性上使用：

参数描述数据属性示例宽度签名帆布的宽度，单位像素，默认值300数据宽度='600' $()。jqSignature({ width : 600 })；高度签名帆布的高度，单位像素，默认值100数据-高度='200' $()。jqSignature({身高： 200 })；边境签名帆布的边框半铸钢钢性铸铁(铸造半钢)样式。默认为1px实心# AAA '数据-边框='1px实心红色' $()。jqSignature({border: '1px纯红' });背景签名帆布的背景颜色，默认值为# FFFFFF '数据-背景=' # eeee ' $().jqSignature({ background : ' # eeee ' })；线条颜色签名的颜色。默认值为# 222222 ' data-line-color=' # ABCDEF ' $().jqSignature({ line color : ' # ABCDEF ' })；线宽签名的线宽，单位像素，默认值为一数据行宽度='2' $()。jqSignature({线宽： { 2 })；自动适应使帆布占满父元素的宽度，默认值假数据-自动拟合='真' $()。jqSignature({ autofit : true })；总结

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