21. drawImage() - 이미지 사용하기

GuriZzang.com에 오시면 

더 자세한 내용을 보실 수 있습니다.

.drawImage( img,x,y,width,height )

• .drawImage( img, x, y, width, height )
• 인자 : img
• 설명 : image 객체
• 인자 : x
• 설명 : 이미지 객체가 그려질 x좌표
• 인자 : y
• 설명 : 이미지 객체가 그려질 y좌표
• 인자 : width
• 설명 : 이미지가 그려지는 크기를 지정합니다. 생략 가능합니다.
• 인자 : height
• 설명 : 이미지가 그려지는 높이이를 지정합니다. 생략 가능합니다.

기본적으로 이미지의 넓이와 높이는 생략 가능하며 기본값은 이미지의 기본 넓이와 높이가 됩니다.

canvas의 재미있는 특징 중 하나는 이미지를 사용할 수 있는 것입니다. 이것을 이용하면 동적으로 사진을 합성하거나 그림에 배경을 넣는 등의 작업을 할 수 있습니다. 외부 이미지들은 Gecko가 지원하는 어떤 형식이라도 사용할 수 있습니다. (예. PNG, GIF, JPEG 형식) 같은 페이지에 있는 다른 canvas 요소들을 소스로 사용할 수도 있습니다.

canvas에서 이미지를 사용할 경우 기본적으로 두단계를 거칩니다.

1. HTMLImageElement 객체를 생성합니다.      이미지의 소스로는 URL/path를 사용하거나 다른 canvas 요소의 소스를 이용할 수도 있습니다.  2. canvas에서 이미지가 사용가능상태(onload)가 되었을경우 사용자 함수를 실행 합니다.

기본적으로 javascript의 img요소를 다루는 법과 동일합니다. 다른것이 있다면 canvas에서 img의 소스가 사용가능이 되었을경우 사용자 함수가 실행되고 그 후에 canvas에 그려진다는 것입니다.

이미지의 소스의경우 아래의 경우처럼 Base64로 인코딩된 문자로도 사용이 가능합니다.

?

1 2 3 4 5 6

var img = new Image();   // Create new img element img.addEventListener("load", function() {   // execute drawImage statements here }, false); img.src = 'myImage.png'; // Set source path img.src = 'https://t1.daumcdn.net/cfile/tistory/267BF23456E8FAD913"js plain" style="border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-size: 1em !important; min-height: auto !important; color: black !important; background: none !important;">;  //Base64 String

또한 다른 canvas요소의 video 요소를 가져다 사용할 수도 있습니다.

?

1 2 3 4 5 6 7 8

function getMyVideo() {   var canvas = document.getElementById('canvas');   if (canvas.getContext) {     var ctx = canvas.getContext('2d');       return document.getElementById('myvideo');   } }

아래는 간단한 그래프를 만드는 예제입니다.

먼저 img 객체를 생성후 이미지가 로드되었을때 canvas에 drawImage( img, x, y )로 이미지를 그립니다. img는 이미지 소스이며 x, y는 이미지가 들어갈 좌표입니다. 이미지를 그린 후 간단한 그래프 라인을 그립니다.

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

function draw() {   var ctx = document.getElementById('canvas').getContext('2d');   var img = new Image();   img.onload = function(){     ctx.drawImage(img,0,0);     ctx.beginPath();     ctx.moveTo(30,96);     ctx.lineTo(70,66);     ctx.lineTo(103,76);     ctx.lineTo(170,15);     ctx.stroke();   };   img.src = 'http://gurizzang.com/demo/canvas/img/21_drawImage01.png'; }

Demo

아래의 소스는 이미지를 작게하여 타일처럼 사용하는 예제 입니다. 사용된 이미지는 canvas보다 조금 더 큰 이미지를 사용하였습니다.

Source 

?

1 2 3 4 5 6 7 8 9 10 11 12

function draw() {   var ctx = document.getElementById('canvas').getContext('2d');   var img = new Image();   img.onload = function(){     for (var i=0;i<4;i++){       for (var j=0;j<3;j++){         ctx.drawImage(img,j*50,i*38,50,38);       }     }   };   img.src = 'http://gurizzang.com/demo/canvas/img/21_drawImage02.jpg'; }

Demo