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>
//页面加载完毕之后使用下面的方法来初始化该签名插件 $(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); });
Configuration parameters
The following are some available parameters of the signature plug-in, which can be used on data-attributes at the same time:Description | Data Attribute | Example | |
The width of the signature canvas, in pixels, default value | 300 | data-width="600"$().jqSignature({width: 600}); | |
The height of the signature canvas, in pixels, the default value is 100 | data-height="200" | $( ).jqSignature({height: 200}); | |
The border CSS style of the signature canvas. The default is '1px solid #AAAAAA' | data-border="1px solid red" | $().jqSignature({border: '1px solid red'}); | |
The background color of the signature canvas, the default value is '#FFFFFF' | data-background="#EEEEEE" | $( ).jqSignature({background: '#EEEEEE'}); | |
The color of the signature. The default value is #222222' | data-line-color="#ABCDEF" | $().jqSignature({lineColor: '#ABCDEF'}); | |
The line width of the signature, in pixels, the default value is 1 | data-line-width="2" | $() .jqSignature({li | neWidth: 2}); |
makes the canvas fill the width of the parent element, the default value is false | data-auto-fit="true" | $().jqSignature({autoFit: true}); |
【Related recommendations】
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!