Maison > Article > interface Web > 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>
//页面加载完毕之后使用下面的方法来初始化该签名插件 $(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); });
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 :
Paramètre | Description | Attribut de données | Exemple | ||||||||||||||||||||||||||||||||
Largeur | La largeur du canevas de signature, en pixels, valeur par défaut300
|
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}); |
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!