| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
- iptime
- OpenWrt
- KB증권
- 티스토리
- 램가스초월
- 복현오거리
- 소비전력
- 알뜰폰
- 자바스크립트
- 킹북이초월
- Apache
- 라즈베리파이2
- PHP-FPM
- Rocky
- 보르비스초월
- ConoHa
- 윈도우10
- php
- 시놀로지
- mysql
- 스톤에이지
- SKT
- 알리익스프레스
- jQuery
- centos
- 아파치
- 리눅스
- KB국민카드
- proxmox
- 가상서버호스팅
- Today
- Total
맛집 여행 캠핑 일상 생활
CANVAS 이미지 그리기 예제 본문
CANVAS 이미지 그리기 예제
PC(마우스) 및 모바일(touch) 브라우저에서도 그리기가 가능한 jQuery 및 HTML 소스입니다.
mousedown -> mousemove -> mouseup (좌표 : e.offsetX, e.offsetY)
touchstart -> touchmove -> touchend (좌표 : e.touches[0].pageX, e.touches[0].pageY)
event 가 서로 다릅니다.
터치스크린은 screenX, screenY, clientX, clientY 가 아닌 pageX Y 값에 canvas 좌표 만큼 빼줘야 합니다.
아래에서 그리기 테스트를 해보세요.
실사용이 가능한 수준으로 만들어 보았습니다.
아래는 예제 소스입니다.
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(document).ready(function(){
var drawCanvas = document.getElementById('drawCanvas');
var drawBackup = new Array();
if (typeof drawCanvas.getContext == 'function') {
var ctx = drawCanvas.getContext('2d');
var isDraw = false;
var width = $('#width').val();;
var color = $('#color').val();
var pDraw = $('#drawCanvas').offset();
var currP = null;
$('#width').bind('change', function(){ width = $('#width').val(); });
$('#color').bind('change', function(){ color = $('#color').val(); });
// 저장된 이미지 호출
if (localStorage['imgCanvas']) {
loadImage();
} else {
ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
}
// Event (마우스)
$('#drawCanvas').bind('mousedown', function(e) {
if (e.button===0) {
saveCanvas();
e.preventDefault();
ctx.beginPath();
isDraw = true;
}
});
$('#drawCanvas').bind('mousemove', function(e) {
var event = e.originalEvent;
e.preventDefault();
currP = { X:event.offsetX, Y:event.offsetY };
if(isDraw) draw_line(currP);
});
$('#drawCanvas').bind('mouseup', function(e) {
e.preventDefault();
isDraw = false;
});
$('#drawCanvas').bind('mouseleave', function(e) {
isDraw = false;
});
// Event (터치스크린)
$('#drawCanvas').bind('touchstart', function(e) {
saveCanvas();
e.preventDefault();
ctx.beginPath();
});
$('#drawCanvas').bind('touchmove', function(e) {
var event = e.originalEvent;
e.preventDefault();
currP = { X:event.touches[0].pageX-pDraw.left, Y:event.touches[0].pageY-pDraw.top };
draw_line(currP);
});
$('#drawCanvas').bind('touchend', function(e) {
e.preventDefault();
});
// 선 그리기
function draw_line(p) {
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.lineTo(p.X, p.Y);
ctx.moveTo(p.X, p.Y);
ctx.strokeStyle = color;
ctx.stroke();
}
function loadImage() { // reload from localStorage
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
}
img.src = localStorage.getItem('imgCanvas');
}
function saveImage() { // save to localStorage
var canvas = document.getElementById('drawCanvas');
localStorage.setItem('imgCanvas', canvas.toDataURL('image/png'));
var img = document.getElementById('saveImg');
img.src = canvas.toDataURL('image/png');
var tmp = $('<a>').attr('download', 'test.png').attr('href', img.src);
tmp[0].click();
tmp.remove();
}
function clearCanvas() {
ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height);
ctx.beginPath();
localStorage.removeItem('imgCanvas');
}
function saveCanvas() {
drawBackup.push(ctx.getImageData(0, 0, drawCanvas.width, drawCanvas.height));
}
function prevCanvas() {
ctx.putImageData(drawBackup.pop(), 0, 0);
}
$('#btnPrev').click(function() {
prevCanvas();
});
$('#btnClea').click(function() {
clearCanvas();
});
$('#btnSave').click(function() {
saveImage();
});
}
});
</script>
</head>
<body>
<div>
<div align="center">
<canvas id="drawCanvas" width="320" height="320" style="border:1px solid #000000;">Canvas not supported</canvas>
</div>
<div align="center">
<select id="width">
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3" selected>3px</option>
<option value="5">5px</option>
<option value="10">10px</option>
<option value="20">20px</option>
</select>
<select id="color">
<option value="#000000">검정</option>
<option value="#FF0000">빨강</option>
<option value="#00FF00">녹색</option>
<option value="#0000FF">파랑</option>
<option value="#FFFF00">노랑</option>
<option value="#FFFFFF">흰색</option>
</select>
<button id="btnPrev">되돌리기</button>
<button id="btnClea">Clear</button>
<button id="btnSave">다운로드</button>
</div>
</div>
<img id="saveImg" src="" style="display:none;" />
<div style="width:100%;height:800px;"> </div>
</body>
</html>
캔버스 이미지 서버에 저장하는 방법 http://itrooms.tistory.com/228
'JAVASCRIPT' 카테고리의 다른 글
| window.onload 함수 여러개 실행되게 하기 (0) | 2016.06.10 |
|---|---|
| jQuery iframe height 를 자동으로 변경 (0) | 2016.05.26 |
| DIV height:auto 인 경우 높이 구하기 (1) | 2016.05.19 |
| jQuery iframe 부모 페이지 scrollTop 컨트롤하기 (0) | 2016.05.09 |
| jQuery Element가 배열인 경우 처리 (0) | 2016.05.02 |