DOM Canvas 이미지 추출

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

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.  

 

이 게시물을
목록
쓰기 태그