Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie HTML5 und Canvas zur Unterstützung von Signatur-Plug-Ins

So verwenden Sie HTML5 und Canvas zur Unterstützung von Signatur-Plug-Ins

零下一度
零下一度Original
2017-05-09 11:00:113710Durchsuche

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn