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>

Initialisierungs-Plug-in

//页面加载完毕之后使用下面的方法来初始化该签名插件
$(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);
});

Konfigurationsparameter

Im Folgenden sind einige verfügbare Parameter des Signatur-Plug-Ins aufgeführt, die gleichzeitig für Datenattribute verwendet werden können:

tbody>

Parameter

Beschreibung

Datenattribut

Beispiel

Breite

Die Breite der Signatur-Leinwand, in Pixel, Standardwert300

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

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

[Verwandte Empfehlungen]

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!