[JavaScript] Image Loading

  . Image Loading


    : 이미지가 출력되는 과정은
     
     1. 이미지 파일로부터 로딩하는 과정
     2. 로딩된 이미지가 출력되는 두 과정으로 나뉜다.
        하지만 어떤 경우든 이미지 로딩이 완료된 후에야
	이미지를 사용할 수 있다.

  <img>태그와 Image 객체

   Image 객체는 <img>태그에 의해 생성된 DOM 객체로서,
   자바스크립트 코드로 이미지를 다룰 수 있게 한다.

   * Image객체의 프로퍼티

   . src  //이미지 주소
   . width  // 이미지가 출력될 폭, 이미지가 로딩되면 이미지의 실제 폭으로 초기화
   . height // 이미지가 출력될 높이, 이미지가 로딩되면 이미지의 실제 높이로 초기화
   . complete // 이미지의 로딩이 완료되었는지 여부, true, false


  * 이미지 로딩 완료와 onload 
     
     <img id="myImg" src="apple.png" width="..." height="...">

      1. var myImg = document.getElementById("myImg");
            //myImg는 Image 객체(<img>태그를 찾아 Image객체를 알아낸다.)
      
      2. myImg.src = "banana.png"
                //<img> 태그에 banana.png 이미지 출력
		 (Image 객체의 src 프로퍼티에 banana.png 파일명을 저장한다.)

      3. var width = myImg.width; 
             // width는 banana.png 이미지의 폭
	       (banana.png 이미지의 폭을 알아내는 한 줄 코드)


 * 이미지 객체 생성

    : 캔버스에 이미지를 그리기 위해서는
      이미지를 담을 이미지 객체가 필요하다.

       var img = new Image();

       img.onload = function() {   //이미지 로딩이 완료되면 함수 코드 실행

                                ...   // 이곳에 img객체에 로드된 이미지를 그리는 코드 작성
				}

       img.src = "test.png";     //img 객체에 test.png 파일로 부터 이미지 로딩 시작


       : 이미지 로딩이 완료되어야 이미지를 그릴 수 있으므로,
         이미지 로딩을 지시하기 전 img.onload 리스너에 
	 이미지가 로딩되었을 때 이미지를 그리는 자바스크립트 코드를 등록해둔다.


    : 이미지 그리기

       이미지 로딩이 완료되면 컨텍스트 객체의 drawImage() 메소드를 
       이용하여 이미지를 그린다.
       drawImage()는 다음 몇가지 유형이 있다.

       1. 원본 크기로 그리기
          원본 이미지 크기 그대로 그리는 drawImage()는 다음과 같다.

	  drawImage(img, dx, dy)
	           . img : 이미지 객체
		   . dx, dy : 이미지가 그려질 캔버스 좌표(dx, dy)

	     : img객체에 든 비트맵 이미지를 원본 크기로 캔버스의 (dx, dy) 위치에 그린다.

       2. 크기 조절하여 그리기

          원본 이미지의 크기를 조절하여 그리는 drawImage()는 다음과 같다.

	  drawImage(img, dx, dy, dWidth, dHeight)
	        : dWidth, dHeight : 이미지가 그려지는 크기, dWidth x dHeight

		: img 객체의 비트맵 이미지를 캔버스의 (dx, dy) 위치에 
		  dWidth x dHeight 크기로 변형하여 그린다.

       3. 원본의 일부분을 크기 조절하여 그리기
          원본 이미지의 일부분을 택하고 크기를 조절하여 그리는 draqImage()는 다음과 같다.

	  drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
	        : sx, sy, : img 이미지 내 비트맵 좌표 (sx, sy)
		: sWidth , sHeight : 그리기 위에 선택한 img 내의 비트맵 크기,
		                      sWidth x sHeight
		: img 이미지 내부의 (sx, sy)위치에서 sWidth x sHeight 영역의
		       비트맵을, 캔버스의 (dx, dy)위치에 dWidth x dHeight크기로 변형하여 그린다.



 * 마우스 이벤트 처리

  - 마우스가 눌러질 때, function down(e) 실행
      : 마우스가 눌러지면 down(e) 함수가 실행되며,
        이벤트가 객체 e와 e.offsetX와 e.offsetY를 통해
	캔버스 내 마우스가 눌러진 위치를 알 수 있다.

      : 마우스가 눌러진 위치에서 드래깅하는 동안 그림을 그리기 때문에
        마우스가 눌러진 위치를 전역변수 startX와 startY에 저장한다.

	. startX = e.offsetX;//마우스가 눌려진 x위치 저장
	. startY = e.offsetY; //마우스가 눌려진 y위치 저장

	 그리고 이제 드래깅을 통해 그림이 그려질 상태를 뜻하는 
	 drawing 변수를 true로 설정한다.

	 : drawing = true;

  - 마우스가 놓여질 때, function up(e) 실행

         : drawing = false;


   - 마우스가 움직일 때 , function move(e)실행
   
        : 마우스가 움직이는 동안 mousemove 이벤트가 계속 발생하여
	  move(e) 함수가 계속 호출한다.      

	: move(e) 함수는 다음 코드를 이용하여 마우스가 눌러져있지 않으면 그냥 리턴한다
	   : if(!drawing) return;

        : drawing이 true 이면 curX와 curY 에 현재 마우스의 위치 값
	   e.offsetX와 e.offsetY를 저장한다.

	   . curX = e.offsetX
	   . curY = e.offsetY
	   

	그리고 나서 (startX, startY)에서 (curX, curY)사이의 선을 그리도록
	 draw(curX,xurY) 를 호출한다.

	   : draw(curX, curY);

	        : (curX, curY)는 드래깅하는 동안 계속 변하는 마우스커서의 현재 위치이다.


     : startX, startY를 현재 마우스의 위치로 변경하고 함수를 빠져나온다.

          .startX = curX;
	  .startY = curY;


- 마우스가 캔버스를 벗어날 때 function out(e) 실행
    : 마우스가 캔버스를 벗어나면 그림 그리기를 중단시킨다.
      이를 위해 out(e) 함수에서는 다음과 같이 drawing 변수값을 false로 설정한다.
      다음과 같이 drawing 변수값을 설정한다.
        : drawing = false;


 * 그림그리기, draw(curX,curY)
      : 캔버스는 점 단위로 그래픽을 수행하는 기능인 없고
        기본 단위가 선이다. 그러므로 한 픽셀의 점도 선으로 표현해야 한다

	: 이 test에서 그림을 그리는 함수는 draw()이다.
	  이 함수를 호출하기 전에 선의 시작점은
	  전역 변수인 startX,startY에 저장하고,

	  . 끝 점 curX, curY 를 매개변수로 하여 draw(curX, curY)를 호츌하면 된다.

	: 다음은 (startX, startY)에서 (curX, curY)까지 선을 그리는 draw() 함수 코드아다.

	   .context.beginPath();    //새로운 경로 시작
	   .context.moveTo(startX, startY);  //새로운 시작점 추가
	   .context.lineTo(curX, curY);  
       //경로에 (startX,startY)에서(curX, curY)사이의 선을 추가 //경로에 모두 그리거
	   
	   .context.stroke();   

	
		. Storage 사용

     :  웹 사이트의 정보를 저장하기 위해서 반드시 
        서버가 필요한 것은 아닙니다.
        사용 목적에 따라 클라이언트 저장소 역시
        좋은 역할을 할 수 있습니다.
        일반적으로 클라이언트 저장소를 생각하면
        가장 먼저 쿠키 저장소를 떠올리겠지만 HTML5에는
        좀 더 효과적인 클라이언트 저장 공간을 제공합니다.

        : localStorage, sessionStorage API

         : HTML5에서는 좀 더 쉽고 간단한 저장소 제공을 위해 새로운
           localStorage와 sessionStorage API를 제공합니다.
           둘 다 저장 공간으로 사용할 수 있는데
           이 둘의 가장 큰 차이점이라면 저장소로서의 기능은
           대부분 동일하며 단지 sessionStorage의 경우
           세션이 종료되면 저장된 데이토도 함께 사라진다는 점이 다른 점입니다.

           . 대부분의 데이터의 경우 데이터 베이스에 저장하므로
             로컬 및 세션 스토리지가 사용되는 곳은 그리 많지 않습니다.
             부분 임시적인 용도 도는 캐시, history 기능을 위하여 사용됩니다.