canvas 그림 불러오고 그리고 저장하기


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <title>캔버스 그리고 저장하기</title>
    <style type="text/css">
        canvas {border:1px solid #000;}
    </style>
</head>
<body>
    <form>
        <input type="file" id="photo">
    </form>
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <div><a href="" onclick="saveCanvasToImage(this)">그림저장하기</a></div>
    <script type="text/javascript">
        var canvas, context;
        var drawing = false;
        var lastX, lastY;
        var Size = 5;
        window.onload = function(){
            canvas = document.getElementById("mycanvas");
            context = canvas.getContext("2d");
        }
        window.onmousedown = mousedown;
        window.onmousemove = mousemove;
        window.onmouseup = mouseup;
        function mousedown(event){
            var e = event || window.event;
            drawing = true;
            lastX = e.clientX;
            lastY = e.clientY;
            draw(e.clientX, e.clientY);
        }
        function mousemove(event){
            if(drawing){
                var e = event || window.event;
                draw(e.clientX, e.clientY);
            }
        }
        function mouseup(event){
            var e = event || window.event;
            drawing = false;
            draw(e.clientX, e.clientY);
        }
        function draw(x,y){
            context.lineWidth = Size;
            context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(x, y);
            lastX = x;
            lastY = y;
            context.closePath();
            context.strokeStyle = "#000000";
            context.stroke();
        }
        function saveCanvasToImage(link){
            var src = canvas.toDataURL("image/png")
            link.download = "image.png";
            link.href = src;
        }

        $("#photo").change(function(){
            photoLoad(this);
        });
        function photoLoad(photo){
            if( ! photo.files ) return;
            if( ! photo.files[0] ) return;
            var reader = new FileReader();
            reader.onload = function(event){
                var src = event.target.result;
                if( ! src ) return;
                var img = new Image();
                img.onload = function(){
                    context.drawImage(img,0,0,500,500);
                };
                img.src = src;
            };
            reader.readAsDataURL(photo.files[0]);
        }
    </script>
</body>
</html>