How to use html5 and canvas to support signature plug-ins

jq-signature.js is a jQuery plugin that helps you create signatures, allowing your users to generate signatures using the mouse, finger or pencil. The following article mainly introduces you to the relevant information about using html5+canvas to implement a signature plug-in that supports touch screens. Friends in need can refer to it.

Preface

Everyone uses this jQuery plug-in to create online signatures in daily development, and the things drawn by the user end with Picture## Save it in the form of #, which is very convenient and practical. The method of implementing support will be shared with everyone for your reference and learning. Let’s take a look at the detailed introduction.

The method is as follows:

To use this signature plug-in, you need to introduce jQuery and jq-signature.js files.

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

HTML structure

<!-- 创建一个签名区域，使用HTML5的data-option来传递一些参数 -->
<p 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">
</p>
 
<!-- 创建两个操作按钮，分别用于清空画板和保存签名 -->
<button id="clearBtn" onclick="clearCanvas();">Clear Canvas</button>
<button id="saveBtn" onclick="saveSignature();" disabled>Save Signature</button>
 
<!-- 可以使用一个空的<p>来显示保存的签名图片 -->
<p id="signature"></p>

Initialization plug-in

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

Configuration parameters

The following are some available parameters of the signature plug-in, which can be used on data-attributes at the same time:

ParameterDescriptionData AttributeExampleWidth The width of the signature canvas, in pixels, default valuedata-width="600"$().jqSignature({width: 600});HeightThe height of the signature canvas, in pixels, the default value is 100data-height="200"$( ).jqSignature({height: 200});BorderThe border CSS style of the signature canvas. The default is '1px solid #AAAAAA'data-border="1px solid red"$().jqSignature({border: '1px solid red'});BackgroundThe background color of the signature canvas, the default value is '#FFFFFF'data-background="#EEEEEE"$( ).jqSignature({background: '#EEEEEE'});Line ColorThe color of the signature. The default value is #222222'data-line-color="#ABCDEF"$().jqSignature({lineColor: '#ABCDEF'});Line WidthThe line width of the signature, in pixels, the default value is 1data-line-width="2"$() .jqSignature({liAuto Fit makes the canvas fill the width of the parent element, the default value is false data-auto-fit="true"$().jqSignature({autoFit: true});

	300
			neWidth: 2});

【Related recommendations】

1.

Free h5 online video tutorial

2.

HTML5 Complete Edition manual

3.

php.cn original html5 video tutorial

The above is the detailed content of How to use html5 and canvas to support signature plug-ins. For more information, please follow other related articles on the PHP Chinese website!