# JavaScript # canvas

Canvas 썸네일, 배너 제작기

Web-application
Canvas 썸네일, 배너 제작기

깃허브

제작기 링크

소개

HTML5 Canvs를 이용해서 간단하게 썸네일, 배너 등에 쓸 수 있는 이미지를 제작할 수 있는 앱입니다.

이미지의 크기 조정, 텍스트 수정, 배경 색 및 글자 색 변경, 배경에 이미지 추가, 해당 이미지의 투명도 조절 등의 기능이 포함되어 있습니다.

포토샵 등의 도구보다 자유도는 떨어지지만, 배너나 썸네일을 만들기는 훨씬 수월합니다.

사용법

크기 조정

Canvas의 크기를 조절할 수 있습니다.

당연하지만 너비나 높이가 0이면 결과가 출력되지 않고, 수치를 너무 크게 잡아도 오류가 발생합니다.

글자 추가

Type Here!이 적힌 공간에 아무 글자나 입력하면 해당 글자가 Canvas에 출력됩니다.

윈도우에선 윈도우 키와 .을 동시에 누르면 이모지를 편하게 넣을 수 있는 창이 열립니다.

텍스트

글꼴을 변경하실 수 있습니다.

Sans-serif, 본고딕(Noto Sans KR), 나눔 고딕(Nanum Gothic), 둥근모꼴(DungGeunMo), 배민주아체(BMJUA) 다섯 개의 글꼴을 추가해뒀습니다.

선택 창에 표시되는 글꼴이 해당 글꼴이니 참고해주세요.

외에도 글자의 크기와 색상을 변경하실 수 있습니다.

글자 크기는 PX(픽셀) 단위를 사용합니다.

배경

배경의 색상을 변경할 수 있고, 배경에 이미지도 추가하실 수 있습니다.

이미지를 추가하시면 이미지의 투명도를 조절할 수 있는 옵션이 새로 생깁니다.

Opacity(불투명도)가 아닌 Transparency(투명도) 입니다. 0일 때 완전 불투명, 오른쪽으로 갈수록 투명해집니다.

당연하지만 투명도를 높이면 배경 색으로 설정해둔 색상이 보입니다.

배경을 #000000으로 두고 투명도를 0.5로 준 모습입니다.

완성!

작업이 끝나고 페이지 제일 아래에 있는 다운로드 버튼을 클릭하시면 완성된 이미지를 내려받으실 수 있습니다!

Web-application 카테고리 관련 글

위 글이 유용하셨다면, 아래 글도 읽어보세요!

GIF / MP4 변환기

GIF / MP4 변환기

온라인 변환기 대부분은 서버에서 변환을 처리합니다. 이는 느린 속도, 파일 크기 / 파일 길이 / 프레임 등의 제한이라는 단점이 필연적으로 동반되기 마련인데, WASM과 FFMpeg를 통해 이 단점을 해결한 앱입니다.이 앱의 가장 큰 단점은 SharedArrayBuffer를 사용해 모바일에선 사용이 힘들단 것입니다(보안상 이유로 차단됨).

ReactJS TypeScript FFmpeg GIF Converter
웹 카메라

웹 카메라

Github카메라 앱 링크 트와이스의 일본 앨범 "&TWICE"의 발매를 맞아 진행하는 [&TWICE Web 카메라 컨텐츠]란 이벤트를 보고 제작하게 됐습니다. 그냥 트와이스 멤버가 들어간 액자(프레임)가 있고, 본인이 찍은 사진을 그 안에 집어넣어서 사진을 만드는 단순한 이벤튼데, Web 카메라라면서 찍어둔 사진만 업로드가 가능하길래, HTML5 Canvas 공부도 할 겸 실제로 카메라를 쓰는 앱을 만들어 봤습니다. 굉장히 단순한 앱입니다. 화면

TWICE New Tab

TWICE New Tab

크롬 확장 프로그램으로 제작한 TWICE New Tab을 싱글 페이지 앱으로 옮겼습니다. 앱 링크 외관은 크롬 확장 프로그램 버전과 크게 다르지 않습니다.크롬 외의 브라우저에서 해당 페이지를 홈페이지로 설정하면 크롬 확장 프로그램과 똑같이 사용하실 수 있습니다. 당연히 모바일도 지원합니다. 기본적으로 새 탭을 꾸미기 위해 만든 앱입니다.밋밋한 새 탭을 트와이스, 할 일 목록, 날씨 등으로 채울 수 있습니다.

TWICE New Tab