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

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

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!