아이폰 html5 드로잉 소스
로빈아빠
본문
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Progma" content="on-cache" />
<meta http-equiv="Expires" content="-1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;" />
<style type="text/css">
#stage {
border:1px #DDD solid;
}
#link{
text-align:center;
border:2px solid;
border-color:red;
}
#closed{
border:1px solid;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var started = false;
var canvas, context;
//초기화 함수
function init(){
canvas = document.getElementById('stage');
context = canvas.getContext('2d');
started = false;
//아이폰인지 판별
var ua = navigator.userAgent;
if(ua.indexOf('iPhone') > 0){
canvas.addEventListener('touchstart', function(e){
context.beginPath();
context.moveTo(e.targetTouches[0].pageX - 8, e.targetTouches[0].pageY - 8);
started = true;
});
canvas.addEventListener('touchmove', function(e){
if(started == true){
e.preventDefault();
context.lineTo(e.targetTouches[0].pageX - 8, e.targetTouches[0].pageY - 8);
context.stroke();
}
$("#debug").html(e.targetTouches[0].pageX + "/ " + e.targetTouches[0].pageY );
});
canvas.addEventListener('touchend', function(e){
if(started == true){
started = false;
}
});
}else{
canvas.onmousedown = function(e){
context.beginPath();
context.moveTo(e.clientX - 8, e.clientY - 8);
started = true;
};
canvas.onmousemove = function(e){
if(started == true){
context.lineTo(e.clientX - 8, e.clientY - 8);
context.stroke();
}
};
canvas.onmouseup = function(e){
if(started == true){
started = false;
}
};
}//end else
};//end init();
//이미지 추출
function ExtractImage(){
var strDataURI = canvas.toDataURL("image/jpeg");
//이미지 데이타를 전송후 php에서 이미지로 저장
$.ajax({
type: "POST",
url : "ExtractImage.php",
data : { data : strDataURI },
success : function(data){
$("#image").html(data);
$("#image").append('<img src="' + strDataURI + '">');
$("#link").css({ "display" : "block" });
}
});
}
$(function(){
init(); //초기화실행
//클릭시 레이어 닫기
$("#closed").click(function(){
$("#link").css({ "display" : "none" });
$("#image").html("");
});
});
</script>
</head>
<body>
<div id="container">
<canvas id="stage" width="300" height="270"></canvas>
</div>
<a href="javascript:ExtractImage();">이미지출력</a>
<a href="javascript:document.location.reload();">초기화</a>
<br><br>
<div id="link" style="display:none;">
<div id="image">
</div>
<span id="closed">닫기</span>
<br><br>
</div>
<div id="debug"></div>
</body>
</html>
관련링크
- 이전글아이폰 사파리용 웹 어플 개발하기 11.05.13
- 다음글iPhone Safari 웹개발 기본 팁 11.05.13
댓글목록
등록된 댓글이 없습니다.