그냥 개발자 블로그

모바일웹에서 싸인을 받을수 있을까? 제이쿼리(jquery) 본문

소식/플러그인소식

모바일웹에서 싸인을 받을수 있을까? 제이쿼리(jquery)

마음이파파 2015. 9. 21. 20:43

문득 마트에서 카드로 계산하다가 든 생각인데요.


"스마트폰으로 싸인을 받을순 없을까?" 하는 쓸때 없는 생각이 ㅋㅋㅋㅋㅋ


쓸때 없는 생각이라도 나중에 쓸모가 있지 않을까해서


제이쿼리(jquery) 플러그인으로 만들어 봤어요.


사실 이 제이쿼리(jquery) 플러그인은 간단해서 만들어진지 꽤 되었으나


블로그에 쓰는걸 깜박하고 이제야 쓰네요.






아쉽지만 스마트폰으로 화면 동영상을 캡쳐할만한 어플을 아직 찾지 못한 관계로


그냥 이미지로 올려요.


위 이미지는 제이쿼리(jquery) 플러그인 테스트 화면인데요.


정해진 영역에 손으로 쓰쓱~ 싸인을 할수 있어요.


뿐만 아니라 추출해서 form에 데이터를 담아 보낼수도 있죠.





이게 싸인이 데이터화 되어 form으로 전송된 결과인데요.


보시는것처럼 이미지가 문자화코드화 되어 전달되는걸 보실수 있어요.


그렇다면 사용법을 볼까요?






 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="elecSign.js"></script>


<script>

$(function(){

$('#can').elecSign();

});

</script>


<body>

<form method="post" action="index.php">

<canvas id="can" width='300px' height="300px"></canvas><br/>

<input type="submit" value="전송">

</form>

</body>

 

일단 예제에 이렇게 html를 작성해주세요.


여기서 주의할 점이 canvas 태그에 width, height는 직접 써줘야해요.


css를 통해서 width, height를 정해줄시에는 정상적으로 동작 안하더라고요.


이건 html5의 버그 아니면 스마트폰 브라우저의 버그 같아요.





 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="elecSign.js"></script>


<script>

$(function(){

$('#can').elecSign();

});

</script>


<body>

<form method="post" action="index.php">

<canvas id="can" width='300px' height="300px"></canvas><br/>

<input type="submit" value="전송">

</form>

</body>



제이쿼리(jquery) 플러그인을 연결해주고요.



 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="elecSign.js"></script>


<script>

$(function(){

$('#can').elecSign();

});

</script>


<body>

<form method="post" action="index.php">

<canvas id="can" width='300px' height="300px"></canvas><br/>

<input type="submit" value="전송">

</form>

</body>



document가 완료되는 시점에서 위와 같이 한줄 써주면 끝!

 


그런데 자세히보시면 canvas 태그내에 name이 없죠?


canvas 태그는 form으로 데이터를 사실 보내지 못해요.


그래서 약간의 편법을 써야 하는데 


그방법이 제이쿼리(jquery) 플러그인 내에 구현되어 있죠.


form으로 데이터를 싸인 데이터를 보낼때는 꼭 method 속성은 post로 해주세요.


get 데이터는 보낼수 있는 용량이 적어서 안보내지거든요.


그리고 데이터 받으실때는 elecSign 키로 받으시면 되요.






쓸때 없을지 모르지만 해당 제이쿼리 플러그인은 elecSign.js 라는 이름으로


홈페이지에서 공유중이니


궁금하신분은 사용해보세요.










저작자표시 비영리 변경금지

'소식 > 플러그인소식' 카테고리의 다른 글

쇼핑몰 상단배너 만드는 간단한 제이쿼리(jquery) 플러그인  (0) 2015.09.22
간단한 제이쿼리(jquery) 슬라이드 플러그인 공유  (19) 2015.09.21
드래그앤드롭 제이쿼리(jquery) 플러그인  (0) 2015.09.21
모바일용 회전메뉴 제이쿼리(jquery) 플러그인  (0) 2015.09.21
공지용 레이어팝업 간단 구현 제이쿼리(jquery) 플러그인  (0) 2015.09.21
'소식/플러그인소식' Related Articles more