[jQuery] 웹에서 싸인 받기 > 팁앤테크

본문 바로가기
사이트 내 전체검색

팁앤테크

[jQuery] 웹에서 싸인 받기

페이지 정보

본문

 

0ccf963ff7b067c9d9d64b6e44ec6d91_1454523451_1776.png
 

`mb_signature1` TEXT DEFAULT '',

 

                    Signature
                    <?php if($member['mb_signature1']) { ?>
                        <br><img src="<?php echo $member['mb_signature1'] ?>">
                    <?php } ?>
                        <input type="hidden" name="mb_signature1" value="<?php echo $member['mb_signature1'] ?>" class="form-control input-sm">
                        <div id="mb_signature1"></div>                   
                    *Note: A 2% credit card transaction charge will be applied                   

                    <style type="text/css">
                        #div_signcontract{ width: 283px; }
                        .popupHeader{ margin: 10px; }
                    </style>
                    <script type="text/javascript">
                        var isSign = false;
                        var leftMButtonDown = false;
                       
                        jQuery(function(){
                            //Initialize sign pad
                            init_Sign_Canvas();
                        });
                       
                        function fun_submit() {
                            if(isSign) {
                                var canvas = $("#canvas").get(0);
                                var imgData = canvas.toDataURL();
                                jQuery('#page').find('p').remove();
                                jQuery('#page').find('img').remove();
                                jQuery('#page').append(jQuery('<p>Your Sign:</p>'));
                                jQuery('#mb_signature1').append($('<input type="text" name="mb_signature1" class="form-control input-sm">').attr('value',imgData));
                               
                                closePopUp();
                            } else {
                                alert('Please sign');
                            }
                        }
                       
                        function closePopUp() {
                            jQuery('#divPopUpSignContract').popup('close');
                            jQuery('#divPopUpSignContract').popup('close');
                        }
                       
                        function init_Sign_Canvas() {
                            isSign = false;
                            leftMButtonDown = false;
                           
                            //Set Canvas width
                            var sizedWindowWidth = $(window).width();
                            if(sizedWindowWidth > 700)
                                sizedWindowWidth = $(window).width() / 2;
                            else if(sizedWindowWidth > 400)
                                sizedWindowWidth = sizedWindowWidth - 100;
                            else
                                sizedWindowWidth = sizedWindowWidth - 50;
                            
                             //$("#canvas").width(sizedWindowWidth);
                             $("#canvas").width(283);
                             $("#canvas").height(80);
                             $("#canvas").css("border","1px solid #000");
                           
                             var canvas = $("#canvas").get(0);
                           
                             canvasContext = canvas.getContext('2d');

                             if(canvasContext)
                             {
                                 //canvasContext.canvas.width  = sizedWindowWidth;
                                 canvasContext.canvas.width  = 283;
                                 canvasContext.canvas.height = 80;

                                 canvasContext.fillStyle = "#fff";
                                 canvasContext.fillRect(0,0,sizedWindowWidth,200);
                                
                                 canvasContext.moveTo(50,150);
                                 canvasContext.lineTo(sizedWindowWidth-50,150);
                                 canvasContext.stroke();
                               
                                 canvasContext.fillStyle = "#000";
                                 canvasContext.font="20px Arial";
                                 canvasContext.fillText("x",40,155);
                             }
                             // Bind Mouse events
                             $(canvas).on('mousedown', function (e) {
                                 if(e.which === 1) {
                                     leftMButtonDown = true;
                                     canvasContext.fillStyle = "#000";
                                     var x = e.pageX - $(e.target).offset().left;
                                     var y = e.pageY - $(e.target).offset().top;
                                     canvasContext.moveTo(x, y);
                                 }
                                 e.preventDefault();
                                 return false;
                             });
                           
                             $(canvas).on('mouseup', function (e) {
                                 if(leftMButtonDown && e.which === 1) {
                                     leftMButtonDown = false;
                                     isSign = true;
                                 }
                                 e.preventDefault();
                                 return false;
                             });
                           
                             // draw a line from the last point to this one
                             $(canvas).on('mousemove', function (e) {
                                 if(leftMButtonDown == true) {
                                     canvasContext.fillStyle = "#000";
                                     var x = e.pageX - $(e.target).offset().left;
                                     var y = e.pageY - $(e.target).offset().top;
                                     canvasContext.lineTo(x,y);
                                     canvasContext.stroke();
                                 }
                                 e.preventDefault();
                                 return false;
                             });
                            
                             //bind touch events
                             $(canvas).on('touchstart', function (e) {
                                leftMButtonDown = true;
                                canvasContext.fillStyle = "#000";
                                var t = e.originalEvent.touches[0];
                                var x = t.pageX - $(e.target).offset().left;
                                var y = t.pageY - $(e.target).offset().top;
                                canvasContext.moveTo(x, y);
                               
                                e.preventDefault();
                                return false;
                             });
                            
                             $(canvas).on('touchmove', function (e) {
                                canvasContext.fillStyle = "#000";
                                var t = e.originalEvent.touches[0];
                                var x = t.pageX - $(e.target).offset().left;
                                var y = t.pageY - $(e.target).offset().top;
                                canvasContext.lineTo(x,y);
                                canvasContext.stroke();
                               
                                e.preventDefault();
                                return false;
                             });
                            
                             $(canvas).on('touchend', function (e) {
                                if(leftMButtonDown) {
                                    leftMButtonDown = false;
                                    isSign = true;
                                }
                            
                             });
                        }
                    </script>

                    <div data-role="page">
                        <div id="page" data-role="content">
                        </div>   
                        <div data-role="popup" id="divPopUpSignContract">
                            <div class="ui-content popUpHeight">
                                <div id="div_signcontract">
                                    <canvas id="canvas">Canvas is not supported</canvas>
                                    <div>
                                        <input id="btnSubmitSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="Submit Sign" onclick="fun_submit()" />
                                        <input id="btnClearSign" type="button" data-inline="true" data-mini="true" data-theme="b" value="Clear" onclick="init_Sign_Canvas()" />
                                    </div>
                                </div>   
                            </div>
                        </div>
                    </div>

추천0

첨부파일

댓글목록

등록된 댓글이 없습니다.

Total 825건 7 페이지
  • RSS
팁앤테크 목록
번호 제목 글쓴이 조회 추천 날짜
705 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12782 0 04-19
704 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10016 0 03-23
703 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10038 0 03-17
702 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10787 0 02-25
701 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11267 0 02-19
700 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10338 0 02-19
699 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10063 0 02-19
698 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10235 0 02-17
697 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9595 0 02-08
696 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10737 0 02-08
695 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10511 0 02-06
694 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10348 0 02-06
693 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10850 0 02-06
692 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 10508 0 02-04
열람중 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13273 0 02-04
690 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9453 0 02-03
689 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9916 0 02-02
688 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 9865 0 01-23
687 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13730 0 01-09
686 제로쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 11520 0 12-09

검색

회원로그인

회원가입

사이트 정보

株式会社YHPLUS / 대표 : ZERO
〒140-0011 東京都品川区東大井2-5-9-203
050-5539-7787
오픈카카오톡 (YHPLUS) :
https://open.kakao.com/o/slfDj15d

접속자집계

오늘
1,513
어제
4,566
최대
6,509
전체
1,066,174
Copyright (c) 株式会社YHPLUS. All rights reserved.