html5 및 캔버스를 사용하여 서명 플러그인을 지원하는 방법-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

html5 및 캔버스를 사용하여 서명 플러그인을 지원하는 방법

零下一度

May 09, 2017 am 11:00 AM

canvas

jq-signature.js는 서명을 생성하는 데 도움이 되는 jQuery 플러그인으로, 사용자가 마우스, 손가락 또는 연필을 사용하여 서명을 생성할 수 있습니다. 다음 글에서는 터치스크린을 지원하는 시그니처 플러그인을 구현하기 위해 html5+캔버스를 사용하는 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

머리말

누구나 이 jQuery 플러그인을 사용하여 일상적인 개발에서 온라인 서명을 만들고, 사용자가 그린 것을 다음과 같이 표현합니다. 사진 형식으로 저장되므로 매우 편리하고 실용적입니다. 지원 구현 방법은 여러분의 참고와 학습을 위해 모두에게 공유될 것입니다. 자세한 소개를 살펴보겠습니다.

방법은 다음과 같습니다.

이 서명 플러그인을 사용하려면 jQuery 및 jq-signature.js 파일을 가져와야 합니다. .

<script src="jquery/1.11.0/jquery.min.js"></script>
<script src="jq-signature.js"></script>

로그인 후 복사

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

로그인 후 복사

구성 매개변수

다음은 데이터 속성에 동시에 사용할 수 있는 서명 플러그인의 일부 사용 가능한 매개변수입니다.

thead>입니다. > tbody>

매개변수

설명

데이터 속성

예

너비

서명 캔버스의 너비(픽셀), 기본값300

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