DOM Canvas 이미지 추출

황제낙엽 2016.08.22 07:14 조회 수 : 312

sitelink1 http://blog.naver.com/shadowbug/220741761678 
sitelink2  
sitelink3  
sitelink4  
extra_vars5  
extra_vars6  

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

 

 

 설명

 getImageData(x, y, width, height)

 canvas의 (x, y)위치의 (width, height) 의 이미지를 추출한다. 

 putImageData(imgData, x, y);

 canvas의 (x, y) 위치에 imageData를 주입한다. 

 

 

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

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

 

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.  

 

번호 제목 글쓴이 날짜 조회 수
88 HTML5 강좌 12강 - HTML5 태그 - canvas 채우기 스타일,그라데이션 file 황제낙엽 2016.12.03 281
87 HTML5 강좌 11강 - HTML5 태그 - canvas 베지에곡선, 선 스타일 file 황제낙엽 2016.12.03 214
86 HTML5 강좌 10강 - HTML5 태그 - canvas 원그리기 file 황제낙엽 2016.12.03 250
85 HTML5 강좌 9강 - HTML5 태그 - canvas 다각형 file 황제낙엽 2016.12.03 184
84 HTML5 강좌 8강 - HTML5 태그 - canvas 선그리기 file 황제낙엽 2016.12.03 188
83 HTML5 강좌 7강 - HTML5 태그 - canvas 사각형 file 황제낙엽 2016.12.03 183
82 HTML5 강좌 6강 - HTML5 태그 - canvas #1 file 황제낙엽 2016.12.03 269
81 HTML5 강좌 5강 - HTML5 태그 - prograss,download file 황제낙엽 2016.12.03 201
80 HTML5 강좌 4강 - HTML5 태그 - mark,time,meter file 황제낙엽 2016.12.03 190
79 HTML5 강좌 3강 - HTML5 레이아웃 잡아보기 file 황제낙엽 2016.12.03 201
78 HTML5 강좌 2강 - HTML5 시맨틱웹을 위한 구성요소 file 황제낙엽 2016.12.03 424
77 HTML5 강좌 1강 - HTML5 개념 및 기본구조 file 황제낙엽 2016.12.03 198
76 HTTP 오류 코드의 종류 황제낙엽 2016.12.01 196
75 Multiple Canvas Layer 예제 file 황제낙엽 2016.08.23 225
74 Canvas 개요 황제낙엽 2016.08.22 281
73 Canvas 확대 file 황제낙엽 2016.08.22 224
72 Canvas setTransform 함수 황제낙엽 2016.08.22 230
71 Canvas 회전 file 황제낙엽 2016.08.22 271
70 Canvas 영역 선택 file 황제낙엽 2016.08.22 233
69 Canvas CanvasRenderingContext2D Context 속성 황제낙엽 2016.08.22 203