Maison  >  Article  >  interface Web  >  Comment utiliser HTML5 et Canvas pour prendre en charge les plug-ins de signature

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

零下一度
零下一度original
2017-05-09 11:00:113715parcourir

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>

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>

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);
});

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});
data-width="600" $().jqSignature({width : 600} );
Hauteur Hauteur du canevas de signature, pixel unité, valeur par défaut 100 data-height="200" $() .jqSignature({height: 200});
Border Le style CSS de bordure du canevas de signature. La valeur par défaut est '1px solid #AAAAAA' data-border="1px solid red" $().jqSignature({border: '1px solid red'}); td>
Arrière-plan La couleur d'arrière-plan du canevas de signature, la valeur par défaut est '#FFFFFF' données -background="#EEEEEE" td> $().jqSignature({background: '#EEEEEE'});
Couleur de ligne La couleur de la signature. La valeur par défaut est #222222' data-line-color="#ABCDEF" $().jqSignature({lineColor: '#ABCDEF'});
Largeur de ligne La largeur de ligne de la signature, en pixels, la valeur par défaut est 1 data-line-width="2 " $().jqSignature({lineW

idth : 2 });

Ajustement automatique Fait en sorte que le canevas remplisse la largeur de l'élément parent, la valeur par défaut est false data -auto-fit="true" $().jqSignature({autoFit: true});


【Recommandations associées】

1 Tutoriel vidéo en ligne h5 gratuit

2. Manuel de la version complète HTML5

3 Tutoriel vidéo HTML5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn