본문 바로가기

제가 쓴 책175

2. Video 2. Video 지금까지는 웹사이트에서 동영상 파일을 재생하기 위해서 어도비(Adobe)사의 Flash Video가 대세였지만 HTML5가 등장하면서 어도비(Adobe)사의 Flash가 조금은 시장에서 밀리는 듯한 인상을 받게 되는 건 저만의 생각이 아닌 듯합니다. 그 원인은 애플사에서 기존의 Flash Video를 지원하지 않고 HTML5에 기본적으로 내장되어 있는 태그를 이용한 동영상 재생을 지원한다고 발표했기 때문입니다. 그리고 그 뒤를 이어 마이크로소프트도 메트로 UI(User Interface) 환경의 Windows 8에 기본적으로 내장되는 IE10에는 Flash를 지원하지 않는다고 발표한 상황입니다. 그렇다고 당장 HTML5의 video 태그가 현재의 Flash 시장을 대체할 것이라고 생각되지.. 2013. 8. 7.
1. Audio 1. Audio 웹사이트를 방문하다 보면 간혹 사운드가 배경에 깔려서 나오거나 플레이가 가능하도록 해놓은 사이트가 있는 것을 보게 됩니다. 일반적으로 웹사이트에서 사용되는 오디오 파일은 mp3, wav, ogg 파일 형식들을 들 수 있는데 mp3, wav 파일 형식은 자주 보아서 그리 낯설지 않을 것입니다만 ogg 파일 형식은 이 책을 통해 처음 보게 되는 분들도 있을 것입니다. ogg 파일 형식은 비영리 기구인 Xiph.Org Foundation에서 무료 audio, video 파일 형식입니다. Xiph.Org 재단(Foundation)에서는 ogg 파일이 소리(audio)일 경우 이를 압축하고 해제하는데 사용하는 Vorbis 코덱을 만들었고 비디오(video)일 경우는 압축하고 해제하기 위해서 The.. 2013. 8. 7.
11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation) 11.2 픽셀(pixel)에 기반한 이미지 가공(Manipulation) 왜 픽셀에 기반한 이미지 가공이 필요할까요? 간단한 예를 하나 들면 특정 영역을 밝게 하거나 어둡게 할 경우 지금까지 설명한 방법들로는 불가능합니다. 일반적인 픽셀(pixel) 기반 이미지 가공의 과정을 간략히 도식화하면 다음과 같습니다. 위와 같은 작업을 할 수 있도록 drawing context는 픽셀(pixel) 단위로 이미지를 가공하여 반영하는데 사용할 수 있도록 다음과 같은 4 가지 메서드를 제공합니다. imagedata = context.createImageData(sw, sh); imagedata = context.createImageData(imagedata); imagedata = context.getImageDat.. 2013. 8. 7.
11. 이미지(Image) 11. 이미지(Image) 캔버스(canvas)내에서 이미지 작업은 크게 drawImage 메서드를 이용한 캔버스 내 이미지를 그리는 작업, 픽셀(pixel)에 기반한 이미지 가공 작업 및 방금 전 설명한 이미지의 회전, 축소 등과 같은 변환(Transformation) 등을 수행할 수 있습니다. 여기서는 drawImage 메서드를 이용해서 이미지를 캔버스에 그리는 방법과 기존 이미지를 이용하여 어떻게 이미지 픽셀을 추출하여 나타낼 수 있는지 소개하고 마지막으로 여러 개의 이미지를 이용한 슬라이드 쇼 기능을 구현하는 방법에 대해서 다루고자 합니다. 11.1 drawImage 메서드를 이용하여 이미지 그리기 캔버스(canvas)에 이미지를 그리기 위해서는 다음과 같은 3 가지 형태의 drawImage() .. 2013. 8. 7.

티스토리툴바