Heim > Artikel > Web-Frontend > So verwenden Sie HTML5 und Canvas zur Unterstützung von Signatur-Plug-Ins
jq-signature.js ist ein jQuery-Plugin, das Sie beim Erstellen von Signaturen unterstützt und es Ihren Benutzern ermöglicht, Signaturen mit einer Maus, einem Finger oder einem Bleistift zu erstellen. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zur Verwendung von html5+canvas ein, um ein Signatur-Plug-in zu implementieren, das Touchscreens unterstützt. Freunde in Not können darauf verweisen.
Vorwort
Jeder verwendet dieses jQuery-Plug-in, um in der täglichen Entwicklung Online-Signaturen zu erstellen, und die vom Benutzer gezeichneten Dinge werden durch dargestellt Bilder werden im Formular gespeichert, was sehr praktisch und praktisch ist. Die Methode zur Implementierung der Unterstützung wird allen als Referenz und zum Lernen mitgeteilt. Werfen wir einen Blick auf die detaillierte Einführung.
Die Methode ist wie folgt:
Um dieses Signatur-Plug-in zu verwenden, müssen Sie jQuery- und jq-signature.js-Dateien importieren .
<script src="jquery/1.11.0/jquery.min.js"></script> <script src="jq-signature.js"></script>
HTML-Struktur
<!-- 创建一个签名区域,使用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); });
Konfigurationsparameter
Im Folgenden sind einige verfügbare Parameter des Signatur-Plug-Ins aufgeführt, die gleichzeitig für Datenattribute verwendet werden können:
Parameter | Beschreibung | Datenattribut | Beispiel | ||||||||||||||||||||||||||||||||
Breite | Die Breite der Signatur-Leinwand, in Pixel, Standardwert300
|
data-width="600" | $().jqSignature({width: 600} ); | ||||||||||||||||||||||||||||||||
Höhe | Höhe der Signatur-Leinwand, Einheit Pixel, Standardwert 100 | data-height="200" | $() .jqSignature({height: 200}); | ||||||||||||||||||||||||||||||||
Border | Der Rahmen-CSS-Stil des Signatur-Canvas. Der Standardwert ist „1px solid #AAAAAA“ | data-border="1px solid red" | $().jqSignature({border: '1px solid red'}); | td> | |||||||||||||||||||||||||||||||
Hintergrund | Die Hintergrundfarbe des Signatur-Canvas, der Standardwert ist „#FFFFFF“ | data -background="#EEEEEE" td> | $().jqSignature({background: '#EEEEEE'}); | ||||||||||||||||||||||||||||||||
Linienfarbe | Die Farbe der Signatur. Der Standardwert ist #222222' | data-line-color="#ABCDEF" | $().jqSignature({lineColor: '#ABCDEF'}); | ||||||||||||||||||||||||||||||||
Linienbreite | Die Linienbreite der Signatur, in Pixel, der Standardwert ist 1 | data-line-width="2 " | $().jqSignature({lineW idth: 2 }); |
||||||||||||||||||||||||||||||||
Automatisch anpassen | Lässt die Leinwand die Breite des übergeordneten Elements ausfüllen, der Standardwert ist false | data -auto-fit="true" | $().jqSignature({autoFit: true}); |
1. Kostenloses h5-Online-Video-Tutorial
2. HTML5-Vollversionshandbuch
3. php.cn Original-HTML5-Video-Tutorial
Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML5 und Canvas zur Unterstützung von Signatur-Plug-Ins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!