canvas 이미지 사이즈 질문

canvas 이미지 사이즈 질문

QA

canvas 이미지 사이즈 질문

본문


        <tr>
            <th scope="row"><label for="wr_2">서명날인<strong class="sound_only">필수</strong></label></th>
            <td><p>* 서명확인 필수.</p>
                    <?php if($write['wr_2']) { ?>
                        <br><img src="<?php echo $write['wr_2'] ?>">
                    <?php } ?>
                        <input type="hidden" name="wr_2" value="<?php echo $write['wr_2'] ?>" class="form-control input-sm">
                        <div id="wr_2"></div>                    
                    <style type="text/css">
                        #div_signcontract{ width: 100px; }
                        .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>아래의 서명날인은 사용합니다.</p>'));
                                jQuery('#wr_2').append($('<input type="hidden" name="wr_2" 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(100);
                             $("#canvas").height(40);
                             $("#canvas").css("border","1px solid #000");
                            
                             var canvas = $("#canvas").get(0);
                            
                             canvasContext = canvas.getContext('2d');
                             if(canvasContext)
                             {
                                 //canvasContext.canvas.width  = sizedWindowWidth;
                                 canvasContext.canvas.width  = 100;
                                 canvasContext.canvas.height = 40;
                                 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="서명확인" 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>            
            </td>
        </tr>
</li>

신청폼에 서명란을 넣어놨는데

사이즈를 키우니까 서명 이미지도 같이 커져서 그런데 혹시 캔바스사이즈만 키우고 이미지크기는 그대로 할 수 있는 방법이 있을까요?

이 질문에 댓글 쓰기 :

답변 1

사이즈를 고정하기 위해서 이부분을 수정한 것인가요?

                             //$("#canvas").width(sizedWindowWidth);
                             $("#canvas").width(100);
                             $("#canvas").height(40);

 

동작되는 주소가 있으면 더 명확하겠지만. 대략 아래와 같이 하면 어떻게 동작될지 궁금하네요


 

                            //Set Canvas width
                            var sizedWindowWidth = $(window).width();
                            if(sizedWindowWidth > 700)
                                sizedWindowWidth = 200;
                            else if(sizedWindowWidth > 400)
                                sizedWindowWidth = 150;
                            else
                                sizedWindowWidth = 100;
                             
                             $("#canvas").width(sizedWindowWidth);

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT