DOM Canvas 이미지 추출

캔버스에 그려진 이미지를 직접 제어해야 할 필요성이 있을 때 사용한다.

아래 예제는 클릭한 곳의 이미지 추출 예제이다.

아래 예제를 한번 본 다면, 캔버스 내 이미지 제어를 하는 방법을 어느정도 감을 잡게 될 것이다.

html

1. <body onload="load(this)">

2.         <div id="result" class="result">

3.             <div class="title"></div>

4.             <div class="color"></div>

5.         </div> 

6.         <canvas  id="draw" onclick="draw(event)" width="300px" height="300px;"></canvas>      

7. </body>

javascript

1.  

2. var ctx = null;

3.  

4. function load(target) {

5.     // 실제로 그려지는 위치의 캔버스 생성

6.     var canvas = document.getElementById("draw");

7.     ctx = canvas.getContext("2d");

8.    

9.    

10.     var img = new Image();

11.     img.src = "test.jpg";

12.     img.onload = function() {

13.         ctx.drawImage(img, 0, 0);

14.     }

15. }

16.  

17.  

18. function draw(event) {

19.     var x = event.offsetX;

20.     var y = event.offsetY;

21.    

22.     var pixel = ctx.getImageData(x, y, 1, 1);

23.     var data = pixel.data;

24.    

25.     var rgbaText = "rgba(" + data[0] + ", " + data[1] + ", " + data[2] + ", " + data[3] + ")";

26.     var result = document.getElementById("result");

27.     var title = result.getElementsByClassName("title")[0];

28.     title.innerHTML = rgbaText;

29.     var colors = result.getElementsByClassName("color");

30.     for(var i=0; i<colors.length; i++) {

31.         colors[i].style.background = rgbaText;

32.     }

33. }

34.  

35.  

36.