동해둘리의 IT Study

HTML Canvas 에 있는 이미지, 자막, 애니메이션 등의 움직임이 있는 요소를 동영상으로 변환, 저장, 스트리밍 할 수 있는 방법을 찾던 중에, 괜찮은 솔루션이 있어서 참고용으로 기록을 남깁니다 저의 경우는 위와 같이 사용자가 원하는 패턴으로 침실을 꾸며보는 프로젝트를 진행하고 있는데요, 그 결과물이 canvas 상에서 이루어 집니다. 그 과정을 영상으로 변환, 저장 할 필요가 있어서 솔루션을 찾고 있었는데, 위 내용과 같이 Firefox 에서 캔버스 안의 내용을 영상 스트림으로 변환하는 기능을 제공한다는 걸 알게되었습니다. HTMLCanvasElement.captureStream() 위 함수가 그런 기능을 제공한다고 합니다. 아울러 유튜브에서도 API 를 통해 같은 기능을 구현할 수 있다고 합니다..

IT공부방/HTML5, CSS 2019. 7. 6. 08:14

동해둘리가 직접 개발했던 실전 프로젝트를 살펴보는 동해둘리의 실전프로젝트 2탄 지난 포스팅에서 html5 에서 제공하는 canvas를 이용하여 이미지를 합성하거나 이미지를 겹치는 방법을 살펴봤었습니다. 앱스토어에서 메리퀸 으로 검색하면 앱을 다운로드 받아서 실제 기능을 확인해 보실 수 있습니다 이번 포스팅에서는, 지난번에 이어서 실제 코드를 살펴보면서 html5 canvas를 이용한 이미지합성 / 이미지겹치기 에 대해 알아보도록 하겠습니다 우선, 위 그림의 침대부분이 canvas 입니다. 그리고 이미지를 합성하기 위한 보이지 않는 hidden 속성의 canvas 가 두개 필요합니다. 캔버스를 지원하지 않는 브라우저 입니다 캔버스를 지원하지 않는 브라우저 입니다 캔버스의 css 설정은 다음과 같습니다. 폭..

IT공부방/HTML5, CSS 2019. 7. 2. 10:27