개발
말풍선 짤 편집기 사이트 제작
왜 만든거에요?
이미지위에 대사나 글씨를 적고싶으면 일반적으로 이미지 편집기(그림판, 포토샵 등)를 통해 작업을 진행하곤 한다.
근데 간단한 대사 한두줄적자고 포토샵을 키자니 포토샵이 무료도 아니고...
그림판으로 하자니 퀄리티가 좀 떨어진다.
무엇보다 폰에서 하기도 힘들고말이다.
그래서 만들어보았다.
온라인 말풍선 편집기!
뭐 하는 거에요?
말그대로 이미지위에 말풍선을 그리는 편집이다.
거두절미하고 예를 들어본다면,
여기 엄청 귀여운 라이덴 콘이 있다.
근데 나는 이 콘을 사용하되 대사를 바꿔 보고 싶었다.
그래서 '말풍선 편집기'를 쓴다면?
따란-! 이렇게 일 좀 하라는 라이덴 콘으로 바뀌는것이다.
그래서 어떻게 써요?
후후 일단 아래 링크를 타고 들어가보자
말풍선 짤 편집기
손쉽게 이미지위에 말풍선을 그리고 텍스트를 적을 수 있는 온라인 편집기입니다.
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 마무리 중 문제 발생어느정도 반복적인 스크립트, 스타일 작업이 완료되고 배포판으로 스크립트와 스타일을 재 패키징 하기위해 서버에 아래와 같이 명령어를 적었다. 기존의 dev나 watch와 다르게 위의 명령어는 압축, 난독화까지 진행해주는 정말 애플리케이션 배포를 위한 마지막 웹팩 작업이다. 근데 갑자기 아...
11/26/2024
라라벨 릴레이션 디폴트 모델 지정
라라벨을 사용하다보면 모델(Model)간의 관계(Relation)를 자주 사용한다. Laravel - The PHP Framework For Web ArtisansLaravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.https://laravel.co...
11/25/2024
라라벨 한 화면에 2개의 페이징 붙이는 법
라라벨 페이지네이션라라벨에는 페이지네이션이라는 강력한 기능이있다. 개발자가 별도로 페이지네이션의 복잡한 구도를 이용하지않아도 쉽게 페이지네이션 백단 모델과 앞단 랜더링을 지원한다. 사용하는 방법도 엄청 간단하다.백단 컨트롤러에서 아래와 같이 선언해주고 앞단에서 아래와 같이 랜더링하면된다. 그러면 아...
이미지처리는 오직 브라우저에서만 지원하고 여러분의 이미지는 서버에 저장되지않습니다.
재밌고 즐겁게 사용해주셨으면 좋겠네요~