[JavaScript] 캔버스에 이미지 그리기

캔버스에 이미지를 그리기 위해서는 이미지를 담을 이미지 객체가 필요하다. 이미지 파일로부터 이미지를 로딩시키기 위해서는 Image 객체의 src 프로퍼티를 이용한다. 이미지 로딩이 완려되어야 이미지를 그릴 수 있으므로, 이미지 로딩을 지시하기 전 onload 리스너에 이미지가 로딩되었을 때 이미지를 그리는 자바스크립트 코드를 등록해둔다.

 

원본 이미지 크기로 그리기

drawImage(img, dx, dy)

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

 

var img = new Image();  // 이미지 객체 생성
img.src = "text.png";	// img 객체에 text.png 파일로부터 이미지 로딩
img.onload = function () {		// 이미지 로딩이 완료되면 로드된 이미지를 그린다
	context.drawImage(img, 20, 20);			// (20, 20) 위치에 이미지를 그림
}

 

 

크기 지정하여 이미지 그리기

drawImage(img, dx, dy, dWidth, dHeight)

• dWidth, dHeight : 이미지가 그려지는 크기. dWidth * dHeight

 

var img = new Image();  // 이미지 객체 생성
img.src = "text.png";	// img 객체에 text.png 파일로부터 이미지 로딩
img.onload = function () {		// 이미지 로딩이 완료되면 로드된 이미지를 그린다
	context.drawImage(img, 20, 20, 100, 200);			
    // (20, 20) 위치에 100*200크기로 이미지를 그림
}

 

특정 부분 잘라내어 이미지 그리기

drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

• sx, sy : img 이미지 내 비트맵 좌표. (sx, sy)
• sWidth, sHeight : 선택한 img 내의 비트맵 크기. sWidth*sHeight

 

var img = new Image();  // 이미지 객체 생성
img.src = "text.png";	// img 객체에 text.png 파일로부터 이미지 로딩
img.onload = function () {		// 이미지 로딩이 완료되면 로드된 이미지를 그린다
	context.drawImage(img, 120, 50, 100, 50, 450, 180, 100, 50);			
    // 원본 (120, 50) 지점에서 100*50 만큼 잘라냄
    // (450, 180) 위치에 100*50크기로 이미지를 그림
}

 

 

캔버스 전체 크기에 맞춰 이미지 그리기

var img = new Image();  // 이미지 객체 생성
img.src = "text.png";	// img 객체에 text.png 파일로부터 이미지 로딩
img.onload = function () {		// 이미지 로딩이 완료되면 로드된 이미지를 그린다
	context.drawImage(img, 0, 0, canvas.width, canvas.height);			
}