Rev. 2.73

마우스 이벤트에 의해 컬러 이미지와 그레이 스케일(흑백) 이미지가 교차되면서 포커싱되는 효과는 시선을 집중시키는 효율적인 방법중 하나입니다. IE의 경우 특정 이미지를 흑백으로 변환하려면 'filter:gray' 스타일 속성을 사용하여 쉽게 해결할 수 있지만 비표준입니다. 비 IE계열 브라우저들은 이에 상응하는 CSS 프로퍼티를 제공하지 않기 때문에 아래와 같은 자바스크립트를 이용하여 이미지를 흑백으로 변환할 수 있습니다.

function grayscale(img) {
  var width = img.getWidth(), height =  img.getHeight();

  // You'll get some string error if you fail to specify the dimensions
  var canvas = new Element("canvas", {width: width, height: height});
  var context = canvas.getContext("2d");
  context.drawImage(img, 0, 0);

  // This function cannot be called if the image is not rom the same domain.
  // You'll get security error if you do.
  var imgData = context.getImageData(0, 0, width, height); 

  // This loop gets every pixels on the image
  for (var x = 0, i; x < width; x++)
    for (var y = 0; y < height; y++)
      imgData.data[(i=x*4+y*4*width)] = imgData.data[i+1] = imgData.data[i+2] =
        (imgData.data[i] + imgData.data[i+1] + imgData.data[i+2]) / 3;

  context.putImageData(imgData, 0, 0, 0, 0, width, height);
  return canvas.toDataURL();
}

// Usages
var img = $('my-image');
img.src = grayscale(img);

img.writeAttribute('src', '/images/smail.gif').observe('load', function() {
  img.stopObserve('load').src = grayscale(img);
});

canvas 요소를 이용한 이미지 프로세싱으로 모든 픽셀을 흑백 데이터로 전환하고 DataURL을 얻는 방법입니다. 위 'grayscale'함수를 사용할 때 세가지 주의해야 할 점이 있습니다. 첫 번째는 이미지의 높이와 너비 값을 얻지 못하는 경우 오류가 발생합니다. 두 번째는 이미지가 완전히 로드된 상태여야합니다. 그렇지 않은 경우 onload 이벤트를 이용하여 호출할 수 있습니다. 그리고 세 번째는 이미지 요소의 'src'속성이 참조하는 경로가 현재 도메인과 일치하지 않는 경우 보안 오류가 발생합니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar