분류: Firefox 3.5

이미지 분위기 있게 만들기

이 글은 silverorange에 기고한 글이며 Mike Gauthier가 작성한 글입니다. silverorange은 본 35일간의 일기 프로젝트를 위한 데모 역시 제공하고 있습니다.

주의: 본 데모 페이지는 CPU가 많이 쓰이는 작업을 포함하고 있습니다. 본 기능에 관심이 있더라도 CPU 성능이 낮은 PC인 경우는 스크린샷만을 봐 주시기 바랍니다. 또한, 본 기능은 Firefox 3.5 RC1에서 더 잘 구동 되며 Beta 4 이하에서는 구동하지 않기를 바랍니다.

Mozilla와 함께 좀 더 혁신적인 실험을 진행하여 HTML5의 새로운 기능을 Firefox 3.5에 탑재하였습니다. 즉, <canvas>와 <video> 요소를 이용하여 재생되는 동영상의 색상 정보를 이용하여 그 주면에 경계선을 그려주는 데모 입니다.

동작 방법
HTML5의 canvas 요소에 동영상 프레임을 집어넣어 색상 계산을 수행합니다. 그런다음 캔버스의 평균 색상을 알아냅니다. 좀더 빠르게 수행하기 위해서 비디오 프레임은 좀 더 작은 캔버스에 만들어지고 (50×50 사이즈) 색상 정확도 및 계산 속도가 향상됩니다. 아래 코드를 참고하세요.

var canvas = document.getElementById('canvas');

var video = document.getElementById('video');
var context = canvas.getContext('2d');

 
// push frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height);

 
// get image data for color calculation
var data = context.getImageData(0, 0, canvas.width, canvas.height);

계산된 색상은 YUI animation을 이용하여 시간에 따라 변합니다.
동영상 각 부분은 SVG 마스크를 통해 뽑아냅니다. Firefox 3.5는 CSS+SVG property 방법을 이용하여 각 요소에 적용할 수 있습니다. 먼저 SVG mask는 문서 인라인에서 정의 합니다. (외부적으로 정의함) 그리고 mask는 아래 CSS를 통해 video 요소에 적용할 수 있습니다.

#video {
    mask: url(index.html#m1);

}

Firefox 3.5에서는 두 가지 CSS+SVG 프로퍼티가 있습니다. clip-pathfilter인다 CSS에서 이를 참조하기 위해서는 url(filename#element-id) 혹은 url(#element-id)을 이용하여 CSS 파일에 정의할 수 있습니다.

마지막으로 이 예제는 CSS 3.0의 새로운 기능들을 주로 이용합니다. Firefox 3.5에서는 box-shadow 프로퍼티, text-shadow 프로퍼티 및 rgba 색상 모델을 사용합니다.

#main-feature {
    -moz-box-shadow: #000 0px 5px 50px;

}
#description {
    text-shadow: rgba(255, 255, 255, 0.4) 1px 1px 2px;

}

댓글 없음

댓글 남기기

의견 보내기