HTML5/ImageData

HTML5 Image data Manipulation

Soul-Learner 2015. 3. 3. 08:33

HTML5 이미지 데이터 접근 및 조작


http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/


캔바스에 그려진 이미지 영역을 마우스로 클릭하면 해당 영역의 픽셀이 투명하게 변경되어 배경이 보이는 효과를 구현한 예

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 20px;
      }
      canvas { background:url(bg.jpg) }
    </style>
    <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
    
  <script type="text/javascript">
  $(function(){          // $(document).ready(function(){
	  $('#myCanvas').on('mousedown', function(evt){
		  var rect = canvas.getBoundingClientRect();
		  var cx = evt.clientX-rect.left;
		  var cy = evt.clientY-rect.top;
		  //alert('클릭됨('+cx+','+cy+')');
		  manipulate(cx, cy);
	  });
  });
  </script>
  </head>
  <body>
 <canvas id="myCanvas" width="500" height="500"></canvas>
 <script>
  var canvas = null;
  var imageData = null;
  
  // 캔바스에 이미지를 그린다
  function drawImage(imageObj) {
	  
      canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      var imageWidth = imageObj.width;
      var imageHeight = imageObj.height;

      context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
  }
    
  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'wall.png';

 
  // 마우스 클릭된 영역을 투명하게 처리하는 예
  function manipulate(cx,cy) {
  	if(!canvas) canvas = document.getElementById('myCanvas');
  	context = canvas.getContext('2d');
  	imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        var data = imageData.data;

       // iterate over all pixels
	for(var y = cy-15; y < cy+15; y++) {
        // loop through each column
        for(var x = cx-15; x < cx+15; x++) {
          /* var red = data[((imageWidth * y) + x) * 4];
          var green = data[((imageWidth * y) + x) * 4 + 1];
          var blue = data[((imageWidth * y) + x) * 4 + 2]; 
          var alpha = data[((imageWidth * y) + x) * 4 + 3];*/
          data[((canvas.width * y) + x) * 4 + 3] = 0;
        }
    }
  	context.putImageData(imageData, 0, 0);
  	//context.putImageData(imageData, canvasX, canvasY);
  	//context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);
  }
  </script>
<input type="button" value="확인" onclick="manipulate(200,200)">
</body>
</html>


저작자표시