Comment utiliser HTML5 et Canvas pour prendre en charge les plug-ins de signature-Tutoriel H5-php.cn

Comment utiliser HTML5 et Canvas pour prendre en charge les plug-ins de signature

零下一度

Libérer： 2017-05-09 11:00:11

original

3668 Les gens l'ont consulté

jq-signature.js est un plugin jQuery qui vous aide à créer des signatures, permettant à vos utilisateurs de générer des signatures à l'aide d'une souris, d'un doigt ou d'un crayon. L'article suivant vous présente principalement les informations pertinentes sur l'utilisation de html5+canvas pour implémenter un plug-in de signature prenant en charge les écrans tactiles. Les amis dans le besoin peuvent s'y référer.

Avant-propos

Tout le monde utilise ce plug-in jQuery pour créer des signatures en ligne dans le développement quotidien, et les éléments dessinés par l'utilisateur sont représentés par Les images sont enregistrées sous une forme très pratique et pratique. La méthode de mise en œuvre du support sera partagée avec tout le monde pour votre référence et votre apprentissage. Jetons un coup d'œil à l'introduction détaillée.

La méthode est la suivante :

Pour utiliser ce plug-in de signature, vous devez importer les fichiers jQuery et jq-signature.js .

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

Copier après la connexion

Structure HTML

<!-- 创建一个签名区域，使用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>

Copier après la connexion

Plug-in d'initialisation

//页面加载完毕之后使用下面的方法来初始化该签名插件
$(document).on(&#39;ready&#39;, function() {
 $(&#39;.js-signature&#39;).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);
});

Copier après la connexion

Paramètres de configuration

Voici quelques paramètres disponibles du plug-in de signature, qui peuvent être utilisés simultanément sur les attributs de données :

tbody>

Paramètre

Description

Attribut de données

Exemple

Largeur

La largeur du canevas de signature, en pixels, valeur par défaut300

参数	描述	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});