3-2-2.이미지 데이터

이미지는 수많은 픽셀로 구성되어 있다. 이미지를 구성하는 픽셀 정보를 래스터(Raster)라고 하며 이미지 표면에 어떤 그림이 그려져 있는지를 저장한다. 래스터 데이터를 직접 조작하면 그리기 메서드로는 불가능한 섬세한 효과를 낼 수 있다. 다음 메서드로 캔버스에 그려진 이미지의 래스터 데이터를 얻는다.

 

getImageData(x, y, w, h)

 

좌표와 폭, 높이를 주면 이 영역의 이미지 정보를 가지는 ImageData 객체가 리턴된다. 이미지 정보를 조작하려면 리턴값을 반드시 대입받아야 한다. ImageData객체의 width, height 속성은 너비와 높이값을 가지며 data는 래스터 정보이다. 래스터 정보는 한 점당 R,G,B,A 요소 각각에 대해 4바이트씩의 값을 가지며 이런 픽셀 정보가 좌에서 우로, 위에서 아래로 나열된다. 이미지 자체는 2차원의 픽셀 배열이지만 래스터 데이터는 1차원의 픽셀 배열이다.

이렇게 1차원으로 픽셀을 나열해 놓아도 ImageData 객체에 폭과 높이에 대한 정보가 있으므로 어디쯤에서 다음줄로 개생되는지 알 수 있다. 예를 들어 폭이 80이면 0~79까지는 1행이고 80 이후부터는 2행이다. 어차피 래스터 데이터는 값 자체를 직접 조작하므로 좌표가 비직관적이어도 상관없다.

래스터 정보는 캔버스의 출력물에 대한 사본을 뜬 것이며 이후 화면과는 상관없이 독립적으로 조작할 수 있다. 개별 색상 요소의 값을 바꾸거나 교환할 수 있고 주변 픽셀값까지 고려하여 조작하기도 한다. 다 조정한 후 다음 메서드로 다시 캔버스에 써 넣는다.

 

putImageData(imgData, x, y, [dx, dy, dw, dh] )

 

imgData 전체를 x, y 위치에 써 넣는다. imgData 자체에 폭과 높이에 대한 정보가 있으므로 좌상단 좌표만 전달하면 된다. 래스터 데이터의 일부만 복사하려면 4번째 이후의 dx, dy, dw, dh 값으로 원본의 어느 부분을 복사할 것인가를 지정한다. 이 인수 앞에 d는 dirty라는 뜻인데 원본에서 달라진 부분, 즉 갱신이 필요한 부분을 의미한다.

캔버스의 이미지를 조작하는 절차는 간단하다. getImageData로 사본을 뜨고 이 사본을 쪼물딱거려 원하는대로 바꾼 후 다시 putImageData로 밀어 넣는 것이다. 픽셀 데이터를 직접 조작하므로 어떠한 변형도 가능하다. 다음은 가장 간단한 예인 반전 조작을 해 본다.

 

revert.html

function draw() {

     var img = new Image();

     img.src="hodori.jpg"

     img.onload = function() {

         ctx.drawImage(img, 0, 0);

        

         var imgData=ctx.getImageData(0, 0, canvas.width, canvas.height);

         var raster = imgData.data;

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

              if (i % 4 != 3) {

                   raster[i] = 255 - raster[i];

              }

         }

         ctx.putImageData(imgData,0, 0);

     }

}

 

호돌이 모양의 이미지를 읽어 캔버스의 원점에 출력했다. 이 상태에서 getImageData 메서드로 캔버스 전체의 이미지 데이터를 읽어 들인다. 조작 대상은 data 멤버에 들어있는 픽셀 정보이다. 전체 래스터 데이터에 대해 루프를 돌며 다음 공식대로 색상 요소값을 조작한다.

 

a' = 255 - a;

 

255에서 원래의 색상요소값을 빼 반전값을 다시 기록한다. 검정색은 흰색이 되고 흰색은 검정색이 되며 중간색은 보색으로 바뀐다. 단, 투명도인 알파값은 그대로 유지한다.

이 예제는 IE와 파이어폭스에서는 잘 실행되지만 크롬에서는 아직 제대로 실행되지 않으며 이후의 예제 몇 개도 마찬가지이다. 조만간 해결되겠지만 당분간은 브라우저에 따라 실행되지 않는 예제가 꽤 있으므로 원하는 결과가 나오지 않으면 브라우저를 바꿔서 테스트해 봐야 한다.

호돌이 오른쪽의 흰색은 반전되지 않는데 이는 캔버스의 원래 색상이 투명한 검정색인 rgba(0, 0, 0, 0)이기 때문이다. 투명색은 반전시켜봐야 여전히 투명하다. 사본을 뜨는 위치를 바꾸면 일부분만 가져와 작업할 수도 있다.

 

revert2.html

function draw() {

     var img = new Image();

     img.src="hodori.jpg"

     img.onload = function() {

         ctx.drawImage(img, 0, 0);

        

         var imgData=ctx.getImageData(0, 80, canvas.width, 50);

         var raster = imgData.data;

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

              if (i % 4 != 3) {

                   raster[i] = 255 - raster[i];

              }

         }

         ctx.putImageData(imgData,0, 80);

     }

}

 

(0, 80)에서부터 높이 50만큼만 가져와 반전시켰다. 반전시킨 래스터 데이터를 원본과 같은 위치인 (0, 80)에 기록했다. 원본과 같은 위치에 써야 할 필요도 없다. 다른 위치에 쓰는 것도 가능하다. 오른쪽 그림은 (0, 80)에서 읽은 값을 (200, 80)에 출력한 것이다.

 

루프에서 래스터 데이터를 어떻게 조작하는가에 따라 원본 그림이 어떻게 변형될 것인가가 달라진다. 다음 예는 컬러 이미지를 그레이스케일로 변형한다.

 

grayscale.html

function draw() {

     var img = new Image();

     img.src="hodori.jpg"

     img.onload = function() {

         ctx.drawImage(img, 0, 0);

        

         var imgData=ctx.getImageData(0, 0, canvas.width, canvas.height);

         var raster = imgData.data;

         for (var i=0;i<raster.length;i+=4) {

              var gray = raster[i] * 0.299 + raster[i+1] * 0.587 + raster[i+2] * 0.114;

              raster[i] = raster[i+1] = raster[i+2] = gray;

         }

         ctx.putImageData(imgData,0, 0);

     }

}

 

각 픽셀의 밝기만 조사하여 R, G, B 색상 요소를 균일하게 만들면 회색이 된다. R, G, B 각 요소가 밝기에 미치는 영향은 29:58:11로 전문가에 의해 계산되어 있으므로 이 비율대로 밝기를 계산하면 된다. 흑백의 지면에서는 똑같아 보일 것이다.

다음 예제는 이미지를 아예 흑백으로 만들어 버린다.

 

monoimage.html

function draw() {

     var img = new Image();

     img.src="hodori.jpg"

     img.onload = function() {

         ctx.drawImage(img, 0, 0);

        

         var imgData=ctx.getImageData(0, 0, canvas.width, canvas.height);

         var raster = imgData.data;

         for (var i=0;i<raster.length;i+=4) {

              var gray = raster[i] * 0.299 + raster[i+1] * 0.587 + raster[i+2] * 0.114;

              if (gray > 128) {

                   gray = 255;

              } else {

                   gray = 0;

              }

              raster[i] = raster[i+1] = raster[i+2] = gray;

         }

         ctx.putImageData(imgData,0, 0);

     }

}

 

그레이스케일은 색상 정보만 없애고 0~255 단계의 회색으로 만드는데 비해 위 예제는 128 이상은 흰색으로, 128 이하는 검정색으로 만들어 버림으로써 흰색과 검정색 두 가지만 남긴다. 경계값인 128을 조정하면 밝기가 달라진다.

이 외에도 여러 가지 필터를 만들어 적용할 수 있다. 밝기 조정, 대비 조정, 세피아 효과, 색상 교체 등의 기법이 있으며 인접 픽셀까지 계산에 포함하면 외곽선 추출, 모자이크 효과 등도 가능하다. 포토샵 많이 써 본 사람들은 이런 효과에 익숙할 것이다.

메모리에서 래스터 데이터를 직접 생성할 수도 있다. 다음 메서드는 래스터 데이터를 원하는 크기로 직접 생성하거나 다른 래스터 데이터의 사본을 복사한다.

 

createImageData(width, height)

createImageData(raster)

 

새로 생성된 래스터 데이터는 rgba(0, 0, 0, 0)인 투명한 검정으로 초기화되는데 여기에 원하는 그림을 직접 그린다. 물론 그리기 메서드를 쓰는 것이 아니라 픽셀 데이터를 직접 조작해야 한다. 다음 예제는 캔버스 크기와 동일한 이미지 데이터를 생성한 후 무작위 위치에 무작위 색상으로 10000개의 점을 찍는다.

 

randompixel.html

function draw() {

     var imgData = ctx.createImageData(canvas.width, canvas.height);

     var raster = imgData.data;

     for (var i=0; i < 10000; i++) {

         var p = Math.floor(Math.random() * raster.length / 4) * 4;

         raster[p] = Math.floor(Math.random() * 256);

         raster[p+1] = Math.floor(Math.random() * 256);

         raster[p+2] = Math.floor(Math.random() * 256);

         raster[p+3] = 255;

     }

     ctx.putImageData(imgData, 0, 0);

}

 

래스터 배열의 임의 위치를 난수로 선택하되 argb 요소의 선두에 맞추기 위해 반드시 4의 배수 위치를 찾아야 한다. 난수로 선택한 곳에 r, g, b 요소를 역시 난수로 써 넣고 알파값은 불투명인 255로 지정한다. 이렇게 하면 무작위 위치에 임의의 색상으로 점이 찍힌다.

새로고침을 할 때마다 점 배치가 완전히 다시 바뀔 것이다. 래스터 데이터는 메모리 덩어리일 뿐이어서 직접 조작은 가능하지만 그리기 메서드를 쓸 수 없으므로 메모리에서 임의의 그림을 그리기는 어렵다.

로컬에서는 이미지 데이터를 크로스 도메인 금지에 의해 조작할 수 없는 경우도 있다. file://으로부터 읽은 페이지는 브라우저의 실행 환경과 다른 도메인으로 취급된다. 이럴 경우는 웹 서버에 올려서 테스트해야 한다.