11. 이미지(Image)
캔버스(canvas)내에서 이미지 작업은 크게 drawImage 메서드를
이용한 캔버스 내 이미지를 그리는 작업, 픽셀(pixel)에
기반한 이미지 가공 작업 및 방금 전 설명한 이미지의 회전, 축소 등과 같은 변환(Transformation) 등을 수행할 수 있습니다. 여기서는 drawImage 메서드를 이용해서 이미지를 캔버스에 그리는 방법과 기존 이미지를 이용하여 어떻게 이미지 픽셀을
추출하여 나타낼 수 있는지 소개하고 마지막으로 여러 개의 이미지를 이용한 슬라이드 쇼 기능을 구현하는 방법에 대해서 다루고자 합니다.
11.1 drawImage 메서드를 이용하여
이미지 그리기
캔버스(canvas)에 이미지를 그리기 위해서는 다음과
같은 3 가지 형태의 drawImage() 메서드를 이용합니다.
context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dw, dh)
context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
위에서 사용되는 입력 파라미터들에 대한 이해를 돕기 위해 각 파라미터를 도식화하면 다음과 같습니다.
각 파라미터들의 의미를 정리하면 다음과 같습니다.
|
입력 파라미터 |
의미 |
|
sx |
소스 이미지의 특정 x 좌표 |
|
sy |
소스 이미지의 특정 y 좌표 |
|
sw |
소스 이미지의 너비(width) |
|
sh |
소스 이미지의 높이(height) |
|
dx |
캔버스 내의 이미지를 그릴 시작 x 좌표 |
|
dy |
캔버스 내의 이미지를 그릴 시작 y 좌표 |
|
dw |
캔버스 내의 그려지는 이미지의 너비(width) |
|
dh |
캔버스 내의 그려지는 이미지의 높이(height) |
“basic.html” 파일을 메모장으로 “flower2.jpg” 이미지가 웹 페이지에 나타나도록 <body> 태그 안에 코드를 다음과 같이 추가합니다.
<body>
<img id="imgflower" src="flower2.jpg"
width="200" height="150"><br />
<canvas id="yourcanvas"
width="400" height="300"></canvas>
</body>
위와 같이 작성한 후 다른 이름으로 저장을 이용하여 “ImageEx.html”
파일로 저장한 후 IE9를 이용하여 열어보면 다음과 같이 나타납니다.
캔버스(canvas) 밖에 “flower2.jpg” 파일이 너비(width) 200, 높이(height) 150의 크기로 나타나며
아직 캔버스 내에 작업은 해주지 않았으므로 위와 같이 나타납니다.
이제 캔버스(canvas) 밖에 “flower2.jpg”
이미지를 캔버스 내에 drawImage(image,
dx, dy) 메서드를 이용하여 그려봅니다. 메모장으로 방금 저장한
“ImageEx.html” 파일로 연 후 “//canvas에
그릴 선이나 도형 작성” 다음 라인에 아래와 같이 코드를 작성합니다.
var
srcImg = document.getElementById("imgflower");
context.drawImage(srcImg, 50, 0);
위의 코드를 추가, 저장한 후 IE9를 이용하여 열어보면 다음과 같이 캔버스 내의 시작 좌표 (50, 0)에서
시작하여 “flower2.jpg” 이미지를 똑 같은 크기로 나타냅니다.
이제 캔버스에 그려지는 이미지의 크기의 변화가 발생하는 형태인 drawImage(image, dx, dy, dw, dh)을 이용해서 이미지의 확대, 축소 형태로 그려봅니다. 방금 전 작성한 drawImage() 메서드에 대한 코드를 다음과 같이 변경합니다.
context.drawImage(srcImg,
50, 0, 100, 75); //크기 축소
위 코드는 원래의 “flower2.jpg” 이미지가
너비(width) 200, 높이(height) 150의 크기인데
이를 각각 100, 75로 크기를 1/2 축소하여 나타내도록
하는 코드입니다. 저장한 후 IE9를 이용하여 열어보면 다음과
같이 축소 이미지가 나타나게 됩니다.
반대로 너비, 높이 모두 2배로 확대할 경우는 “context.drawImage(srcImg, 50, 0, 400, 300);”와 같이 코드를 수정해주면 됩니다. 결과확인은 여러분들이 꼭 해보기 바랍니다.
다음으로 drawImage(image,
sx, sy, sw, sh, dx, dy, dw, dh) 메서드를 이용하여 이미지의 사각형 형태의 특정 영역 부분만을 잘라서 캔버스(canvas)에 그릴 수 있습니다.
이를 위해서 기존의 drawImage() 메서드 라인을 주석(//) 처리한 후 그 다음 라인에 아래와 같이 코드를 작성합니다.
context.drawImage(srcImg, 100, 75, 100, 75, 50, 0, 100, 75);
위 코드는 아래와 같은 원래의 “flower2.jpg”의 해당 영역(sx, sy)는 (100, 75)를 시작으로 너비(sw) 100, 높이(sh) 75인 영역만을 잘라서 캔버스에 그리게
됩니다.
위와 같이 코드를
작성, 저장한 후 IE9를 통해 확인하면 다음과 같이 해당
영역만을 잘라서 캔버스에 그리게 됩니다.
위에서 해당
영역을 확대해서 나타내려면 다음의 부분을 큰 값으로 설정해주면 됩니다.
context.drawImage(srcImg, 100, 75, 100,
75 ,50, 0, 150, 125);
실제 웹 페이지에서는 위와 같이 사용하지 않고 <body> 태그 내에 <img> 요소 태그 내의 “flower2.jpg” 이미지는
화면에 나타나지 않은 상태에서도 사용할 수 있습니다. 이 경우에는
<body> 태그 내의 <img> 요소 부분을 다음과 같이 style 속성을 이용하여 감춰주면 됩니다.
<img
id="imgflower" src="flower2.jpg" width="200"
height="150" style="display:none;">
방금 전까지 <img> 요소를 이용하여
이미 웹 페이지에 있는 이미지를 이용하여 캔버스(canvas)에 이미지를 drawImage() 메서드를 이용하는 방법에 대해서 알아보았습니다.
다음으로 넘어가기에 앞서 image 객체를 생성하고 별도의 분리된 파일로부터 이미지를 로딩한
후 drawImage() 메서드를 이용하여 캔버스(canvas)에
이미지를 그리는 상황을 생각해봅니다.
이러한 상황에서는 웹서버에 접속한 웹브라우저에서 이미지를 모두 다운로드 받기 전까지는 drawImage() 메서드를 가지고 이미지를 이용할 수 없는 문제점이 발생하며 이를 해결하기 위해서 image의 onload 이벤트가 발생한 후 해당 작업을 수행하도록 처리해주면 됩니다. 이를 간략히 코드로 정리하면 다음과 같습니다.
① image
객체 생성
② 사용할 이미지
파일 설정
③ onload 이벤트와 처리할
함수 연결
이제 예제를 해볼까요? basic.html 파일을
메모장으로 연 후 “//canvas에 그릴 선이나 도형 작성” 다음
라인에 아래와 같이 코드를 작성합니다.
// canvas에 그릴 선이나 도형 작성
var img = new Image(); //① image 객체 생성
img.src = "flower2.jpg"; //② 사용할
이미지 파일 설정
//③ onload 이벤트와 처리할 함수 연결
img.onload = function() {
context.drawImage(img, 0, 0);
};
위와 같이 작성하고 다른 이름으로 저장을 이용하여 ImageonloadEx.html로 저장한 후 IE9를 이용하여 열어보면 앞서 drawImage(image, dx, dy) 메서드를 이용한 예제의 결과와 동일하게 나타나게 됩니다. “③ onload 이벤트와 처리할 함수 연결”에서 drawImage() 메서드를 다음과 같이 바꿔서 브라우저를 통해 열어보면 앞서 예제들과 같은 결과를 나타냅니다.
context.drawImage(img, 50, 0, 100, 75); //크기 축소
context.drawImage(img, 100, 75, 100, 75,
50, 0, 100, 75);
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 Canvas에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1. Audio (0) | 2013.08.07 |
|---|---|
| 11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation) (0) | 2013.08.07 |
| 10. 변환(Transformation) (0) | 2013.08.07 |
| 9. 캔버스(canvas) 내용을 이미지로 저장 (0) | 2013.08.07 |
| 8. context의 상태 저장 및 불러오기 (0) | 2013.08.07 |
