자유광장
다른분들과 자유롭게 소통할 수 있습니다. 질문이나 조언을 구하는 글은 [물어보기]를 이용해주세요.
조회 수 268 추천 수 3 댓글 8
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기

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

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

 

페이지는 여기입니다 :)

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://www.xetown.com/lakepark/520085

  • profile
    다이오니 2017.03.05 13:53:40
    좀 더 자세한 방법을 남겨주시면 더 도움이 될것 같아요!

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

    그래도 한번 노력해보겠습니다!
  • profile
    약사이다 2017.03.05 16:17:48
    감사합니다. 마우스와 터치가 둘다 되는거군요
  • profile
    윤삼 2017.03.05 17:34:39
    네 canvas 소개해주신 덕에 돌아다녀보니 이런 게 있더라구요. 감사의 말씀을ㅡ ;)
  • profile
    socialskyo 2017.03.05 16:25:15
    호오~
  • profile
    윤삼 2017.03.05 17:38:42
    후훗ㅡ
  • profile
    아파치 2017.03.06 03:13:10
    와~ 멋진기능임돠~~
  • profile
    윤삼 2017.03.06 07:06:37
    마우스와 터치가 동시에 되는 걸 보고 얼마나 좋았는지 몰라요ㅎㅎ

서버에 요청 중입니다. 잠시만 기다려 주십시오...