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);
답변을 작성하시기 전에 로그인 해주세요.
