비영리 민간단체의 홈페이지를 운영하다보니,후원회원 가입 페이지 개발이 필요할 때가 있습니다.

이때 이용자의 서명을 받아야 할 때가 있는데, 괜찮은 제이쿼리 플러그인이 있어서 소개할까 합니다.

 

페이지는 여기입니다 :)

http://www.jqueryscript.net/other/Smooth-Signature-Pad-Plugin-with-jQuery-Html5-Canvas.html

 

서명 그리기를 위해 html5 canvas로 직접 코딩을 하다보면,

마우스 이벤트와 터치 이벤트를 모두 고려해야 하고, 스마트폰 OS에 따라서도 고려해야 할 게 너무 많은데;;;;

플러그인을 활용하니 고민이 한번에 해결되네요 ^^/

 

여기서 입력된 값을 dataURL의 문자열로 변환시켜 서버에 전송하고, 출력할 때는 문자열 값을 다시 이미지로 변환시켜주면 되더군요.

제 경우엔 스케치북의 write_form.html과 _real.html을 손봐서 회원 서명을 받고 있답니다(는 자랑ㅋ).

(그 외에도 게시판 모듈의 쓰기 폼을 이용한 contact_us 스킨 등등을 개조해서 후원 약정을 받는 폼을 생각해볼 수 있을 거 같아요)

 

덧. 상세한 설명을 붙여봤습니다. https://xetown.com/lakepark/520085

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    좀 더 자세한 방법을 남겨주시면 더 도움이 될것 같아요!

    아주 유용하게 사용할 수 있을 것 같습니다!!
  • profile profile
    원래는 팁게에 올리려고 했는데, 제 경우엔 스케치북을 수정해서 그 과정이 복잡한 바람에 정리해서 글 올리기가 여의치 않더라구요ㅎㅎ

    그래도 한번 노력해보겠습니다!
  • profile
    감사합니다. 마우스와 터치가 둘다 되는거군요
  • profile profile
    네 canvas 소개해주신 덕에 돌아다녀보니 이런 게 있더라구요. 감사의 말씀을ㅡ ;)
  • ?
    호오~
  • ? profile
    후훗ㅡ
  • profile
    와~ 멋진기능임돠~~
  • profile profile
    마우스와 터치가 동시에 되는 걸 보고 얼마나 좋았는지 몰라요ㅎㅎ