[HTML5] 저장가능한 그림판 (canvas, localStorage)

HTML/CSS 2010. 12. 30. 10:09

canvas와 localStorage를 이용하여,
그림판에 그림을 그린 후 '저장하기' 버튼을 누르면 픽셀데이터를 localStorage에 저장한 후,
브라우저를 끄고 다시 켜서 해당 페이지를 로딩하면 localStorage에 저장되어 있는 픽셀데이터가 복원되는 예제.
당장은 아무짝에도 쓸 모 없는 그냥 실험적인 예제.

아래는 그냥 특기사항들
1. 저장용량을 줄이기 위해 알파채널은 무조건 255로 가정하고 저장을 안했음.
2. localStorage가 문자열만 저장이 가능하므로 배열을 사용하지 못하고 delimiter를 이용하여 그냥 주루룩 나열식 저장을 했음.
3. canvas의 이미지는 1픽셀당 4개의 정보가 주루룩 나열된 형태 (R:G:B:A)
4. canvas가 처음 생성되면 몽땅 흰색이지만 픽셀데이터는 0 이 저장되어 있다. 그래서 그대로 저장하면 흰색이 검은색이 된다. 그래서 처음 생성할 때 일단 한 번 흰색(255:255:255)으로 덮어씌우고 시작한다.

<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
    // canvas
    var cnvs = document.getElementById('cnvs');
    // canvas 사용가능
    if (cnvs.getContext) {
        // 캔버스 컨텍스트
        var ctx = cnvs.getContext('2d');

        // 그리기 모드인지 체크하는 변수
        var isDraw = false;

        // 이미지 복원
        if (localStorage['imgData']) {
            var aData = new Array();
            aData = localStorage['imgData'].split('|');
            var imgData = ctx.createImageData(cnvs.width, cnvs.height);

            var j = 0;
            for (var i=0; i<imgData.data.length; i+=4) {
                imgData.data[i]    = aData[j+0]; // R
                imgData.data[i+1] = aData[j+1]; // G
                imgData.data[i+2] = aData[j+2]; // B
                imgData.data[i+3] = 0xFF; // Alpha
                j += 3;
            }
            // 복원된 픽셀데이터를 캔버스에 밀어넣기
            ctx.putImageData(imgData, 0, 0);
        // 이미지 초기화
        } else {
            ctx.fillStyle = 'rgb(255, 255, 255)';
            ctx.fillRect(0, 0, cnvs.width, cnvs.height);
        }

        // 그리기 옵션
        var dot = 1;
        var color = 'rgb(0, 0, 0)';

        // 그리기 옵션 - 도트크기
        $('#dot').bind('change', function(){ dot = $('#dot').val(); });
        // 그리기 옵션 - 색깔
        $('#color').bind('change', function(){ color = $('#color').val(); });

        // 이벤트 핸들러 연결
        $('#cnvs').mousemove(function(e){
            // 그릴 수 있으면 그린다.
            if (isDraw) draw(e);
        });
        $('#cnvs').mousedown(function(e){
            // 왼쪽 버튼 down 이면 그릴 수 있다고 선언
            if (e.button===0) {
                isDraw = true;
                draw(e);
            }
        });
        $('#cnvs').mouseup(function(e){
            // 버튼 up 이면 그릴 수 없다고 선언
            isDraw = false;
        });

        // 그리기
        function draw(e)
        {
            ctx.fillStyle = color;
            ctx.fillRect(e.offsetX, e.offsetY, dot, dot);
        }

        // 지우기
        function clearCanvas()
        {
            ctx.clearRect(0, 0, cnvs.width, cnvs.height);
            ctx.beginPath();

            localStorage.removeItem('imgData');
        }

        // 저장
        function saveImg()
        {
            var imgData = ctx.getImageData(0, 0, cnvs.width, cnvs.height);
            var strData = '';
            for (var i=0; i<imgData.length; i+=4) {
                strData += imgData[i]+'|'+imgData[i+1]+'|'+imgData[i+2]+'|';
            }
            localStorage.setItem('imgData', strData);
        }

        // 지우기
        $('button[id="btnDel"]').click(function(){
            clearCanvas();
        });

        // 저장하기
        $('button[id="btnSave"]').click(function(){
            saveImg();
        });

    // canvas 사용불가
    } else {
        alert('canvas가 지원되지 않는 브라우저입니다. 구글 크롬을 권장합니다.');
        return;
    }
});
</script>
</head>

<body>

<div>
    <canvas id="cnvs" width="300" height="300" style="border: 1px solid black;"></canvas>
    <br />
    <div>
        
        <select id="dot">
            <option value="1">1px</option>
            <option value="2">2px</option>
            <option value="5">5px</option>
            <option value="10">10px</option>
        </select>
         
        
        <select id="color">
            <option value="rgb(0, 0, 0)">black</option>
            <option value="rgb(255, 0, 0)">red</option>
            <option value="rgb(0, 255, 0)">green</option>
            <option value="rgb(0, 0, 255)">blue</option>
            <option value="rgb(255, 255, 0)">yellow</option>
            <option value="rgb(255, 255, 255)">white</option>
        </select>
    </div>
    <br />
    <button id="btnDel">지우기</button>
     
    <button id="btnSave">저장하기</button>
</div>

</body>
</html>

저작자표시

'HTML/CSS' 카테고리의 다른 글

[HTML5] Notifications (브라우저에 트위터앱처럼 push 기능구현) (0)	2010.12.31
[HTML5] Web Messaging (cross-domain messaging, channel messaging) (0)	2010.12.31
[HTML5] WebStorage (0)	2010.12.29
[HTML5] WebWorkers (0)	2010.12.29
[HTML5] canvas 지우기 (clear canvas) (2)	2010.12.29

Posted by bloodguy

Bloodguy
Twitter : @nicehide