이미지 표시

* Image 오브젝트 작성하기

- 이미지를 표시하기 전에 JavaScript로 이미지를 다루기 위한 Image 오브젝트를 작성함.

 

[파일을 사용하여 만드는 방법]

 

var image = new Image();

image.src="sample.jpg";

 

[img 요소에서 꺼내는 방법]

 

[HTML]

<img id="sample1" src="sample.jpg">

[CSS]

var image = document.getElementById("sample1");

 

 

* 이미지 표시하기

- 이미지를 표시하려면 drawImage() 메서드를 지정해야 함.

- drawImage 메서드의 작성 방법은 세 가지가 있음.

 

drawImage(image, dx, dy);

drawImage(image, dx, dy, dw, dh);

                 이미지를 붙여 넣을 위치와 크기

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

  이미지 오브젝트의 그리기 대상이 될 영역의 좌표와 이미지 크기

    : 이미지 오브젝트이 그리기 대상이 될 영역의 위치와 이미지 크기

 

 

* 이미지를 표시할 때의 주의점

- 이미지를 읽어 들일 때 클라이언트 환경이나 이미지의 크기에 따라 읽어 들이는 데 시간이 걸리는 경우가 있음.

- 완전히 다 읽어 들이기 전에 drawImage() 메서드를 실행해 버리면 이미지가 정상적으로 표시되지 않을 수 있음.

- 아래와 같이 하면 이를 방지할 수 있음.

 

image.onload = function() {

drawImage(image, 50, 80);

}

 

-> Image 오브젝트의 onload 이벤트 핸들러는 이미지의 읽어 들이기가 완료되었을 때 호출됨.

-> 이 안에 작성해 두면 읽어 들이기가 확실히 완료된 후에 표시할 수 있음.

 

 

* 클리핑

- 패스를 지정한 후에 clip() 메서드를 지정하면 패스로 둘러싸인 부분만 표시됨.

- 예)

<script>
function draw() {
    var canvas = document.getElementById("canvas1");
    if(canvas.getContext) {
        var cvs = canvas.getContext("2d");
        img = new Image();
        img.src="cvsimg.png";
        img.onload = function() {
            cvs.drawImage(img, 0, 0, 300, 200); // 이벤트 핸들러 안에 표시함.
        }
        cvs.beginPath();
        cvs.arc(140, 100, 60, Math.PI*2, false);
        cvs.stroke();
        cvs.clip();     // 원형 패스로 클리핑함.
    }
}

 

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)