이미지 분위기 있게 만들기

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

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

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

데모 보기 (Firefox 3.5 RC1 이용 추천)

동영상 보기 (Ogg Theora, 4.1MB)
동영상 보기 (mov, h.264, 4.3MB)

동작 방법
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-path와 filter인다 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;

}