개발
말풍선 짤 편집기 사이트 제작
왜 만든거에요?
이미지위에 대사나 글씨를 적고싶으면 일반적으로 이미지 편집기(그림판, 포토샵 등)를 통해 작업을 진행하곤 한다.
근데 간단한 대사 한두줄적자고 포토샵을 키자니 포토샵이 무료도 아니고...
그림판으로 하자니 퀄리티가 좀 떨어진다.
무엇보다 폰에서 하기도 힘들고말이다.
그래서 만들어보았다.
온라인 말풍선 편집기!
뭐 하는 거에요?
말그대로 이미지위에 말풍선을 그리는 편집이다.
거두절미하고 예를 들어본다면,
여기 엄청 귀여운 라이덴 콘이 있다.
근데 나는 이 콘을 사용하되 대사를 바꿔 보고 싶었다.
그래서 '말풍선 편집기'를 쓴다면?
따란-! 이렇게 일 좀 하라는 라이덴 콘으로 바뀌는것이다.
그래서 어떻게 써요?
후후 일단 아래 링크를 타고 들어가보자
말풍선 짤 편집기
손쉽게 이미지위에 말풍선을 그리고 텍스트를 적을 수 있는 온라인 편집기입니다.
https://erulabo.com/speech-bubble-editor
여기에 들어가면 이런 화면을 볼 수 있을꺼다.
그렇다. 일단 이미지에 말풍선을 붙이려면 그 '이미지'가 있어야한다.
그럼 '파일선택'을 통해 적당한 이미지를 선택해보자.
그럼 이미지 아래로 여러가지 옵션을 설정할 수 있는게 나올꺼다.
순서대로 "Step 2. 말풍선 그리기" -> "Step 3. 텍스트 설정하기" -> "Step 4. 이미지 합성하기" 이다.
자 순차적으로 해보자.
일단 말풍선의 대략적인 위치를 정하기위해 업로드된 이미지에 마우스/터치로 드래그 앤 드롭으로 박스를 그려보자.
오 벌써 그럴듯한 말풍선 박스가 그려졌다.
그리고 아래 말풍선 옵션값을 조정하면서 사이즈나 패딩, 외곽선 굵기 색상을 바꿔보자.
그 다음으로는 "Step 3. 텍스트 설정"에 가서 내가 원하는 글을 입력해보자.
그리고 아래로가서 "Step 4. 말풍선 합성 및 추출"에서 말풍선과 이미지를 합치는 작업을 한다.
"말풍선 합성"버튼을 클릭하면 합성결과가 그 아래에 보이게되고, "합성 이미지 다운로드"를 누르면 이미지가 다운로드된다!
실제로 합성된 결과와, 이거 어떻게 만듦?
당-연히 GPT형님의 도움을 받아...
흠흠... 기술적인 부분을 좀 말하자면 HTML5의 Canvas 기능으로 만들어 보았다.
이미지 파일이 업로드되면 그 이미지를 화면에 임시로 랜더링하고 그 랜더링된 이미지와 같은 canvas 크기를 정의한다.
그리고 드래그 앤 드롭으로 박스를 그리는 이벤트, 각종 옵션값이 변경될때 캔바스를 다시 그리는 이벤트 등을 구현하고, 마지막으로 캔바스 내용을 data/image 로 변환해 출력하면 된다.
말이야 쉬운데 나두 기능하나하나 계속 조율해가면서 변경하면서 진행했다.
요걸 만들면서 세운 제일 큰 목적이 "백단 리소스를 사용 안하고 구현하기" 였고 그걸 기준으로 최대한 HTML5와 javascript 처리로만 구현하려고 시도했다.
여러모로 결과물은 괜찮게 나와서 주변 지인분들한테도 테스트해봤더니 정말 재밌게 쓰고 계신다 ㅎㅎ
결론
HTML5 대단해!!
#JavaScript #블로그
개발 카테고리의 다른 글
12/06/2024
라라벨 npm run prod 실패 문제 해결
Webpack 마무리 중 문제 발생어느정도 반복적인 스크립트, 스타일 작업이 완료되고 배포판으로 스크립트와 스타일을 재 패키징...
11/26/2024
라라벨 릴레이션 디폴트 모델 지정
라라벨을 사용하다보면 모델(Model)간의 관계(Relation)를 자주 사용한다. Laravel - The PHP Framework For Web ArtisansLarave...
11/25/2024
라라벨 한 화면에 2개의 페이징 붙이는 법
라라벨 페이지네이션라라벨에는 페이지네이션이라는 강력한 기능이있다. 개발자가 별도로 페이지네이션의 복잡한 구도를 이용하...
이미지처리는 오직 브라우저에서만 지원하고 여러분의 이미지는 서버에 저장되지않습니다.
재밌고 즐겁게 사용해주셨으면 좋겠네요~