포스팅용 첨부 이미지 생성기 - 2

Tasic·2021년 4월 4일

Toyproject web

ToyProject

목록 보기

2/3

프로젝트 사이트

이번에는 이 프로젝트에서 사용중인 git 브랜치 전략과 지난번 이후에 구현한 기능들에 대해서 정리하려 합니다.

git 브랜치 전략

저는 git-flow 전략을 참고하여, master, develop, feature 브랜치만을 운영하기로 하였습니다.
브랜치 전략을 체험 위한 용도로 구상하였습니다.

우린 Git-flow를 사용하고 있어요
Git 브랜치 종류 및 사용법

새로운 기능 추가
- github에 이슈 등록
- develop 브랜치에서 feature 브랜치 생성
- 브랜치명 : feature/[이슈번호]-[구현기능]
- 예시 : feature/100-download-image
기능 개발 완료
- feature 브랜치를 develop 브랜치로 pull request
- 머지 후, feature 브랜치는 삭제한다.
- 관련이슈 close 처리
배포 시
- develop 브랜치를 marster 브랜치로 pull request
- 머지 시점에서 Tag 부여
- github pages를 사용중이므로, 자동으로 변경 됨.

기타
- commit시 message에 이슈번호 언급(#이슈번호)
- 이슈창에서 자신을 언급한 커밋내역 볼 수 있음.
- 이슈에 맞는 커밋내역을 찾기가 편할 것 같음.

canvas에서 SVG로 변경

SVG는 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준입니다.
svg.js 를 이용해서 작업하였습니다.

스케일러블 벡터 그래픽스
Canvas VS SVG

Text와 rect를 포함시켰고
rect는 배경색을 넣는 용도로, Text는 사용자가 입력한 항목을 보여주는 용도로 사용하였습니다.
만약 svg의 포함되어야 되는 요소들이 가변이 될 경우는 미리 포함시키지 않고 동적으로 생성하는 방식으로 변경해야 될 것 같습니다.

 <svg xmlns=http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink" 
      id="imagePreview" height="200" width="400">
    <rect width="100%" height="100%" fill="#ffffff" id="imageBackground" />
	<text id="imageText" dominant-baseline="middle" text-anchor="middle">
    </text>
   This browser doesn't support svg 🙅‍♂️
</svg>

이미지 다운로드 및 클립보드 복사 기능 구현

SVG에서 canvas로 변환하는 과정들은 동일 하기 때문에 convertImageAfterAction함수에서 인자로 callback 함수를 받아서 처리하도록 구현 하였습니다.

    function convertImageAfterAction(callback) {
      ... 생략 ...
        img.onload = function () {
            ctx.drawImage(img, 0, 0);
            DOMURL.revokeObjectURL(url);
            
            callback(canvas);
        };
        img.src = url;
    }