프로젝트 사이트 링크

들어가며

블로그 포스팅을 하려는데, 마땅히 넣을 이미지가 없어서 다른 블로그 글을 참조하다가 단순한 이미지를 발견하였습니다. 이런 형식의 이미지를 넣은 글들이 많았고, 당연히 이러한 이미지를 만들어주는 사이트가 있을 것 같았지만, 저의 검색? 실력의 한계로 찾지를 못하였습니다. 🤔

그래서 이러한 심플한 이미지를 만들 수 있는 Toy Project를 하기로 하였습니다.

사용할 기술 및 환경

• Web Page 형태
• HTML, CSS, JavaScript
• github pages

UI배치

기본적인 UI 컨샙은 hilite.me 페이지를 참조하였습니다.

Header(header) : 페이지 타이틀
TextContents(div) : 텍스트를 입력하는 영역
ImageOptionArea(div) : image size 및 배경색을 설정하는 영역
FontOptionArea(div) : font 크기, 색 등을 설정하는 영역
PreviewArea(div) : 미리보기
Footer(footer) : 블로그 및 github 주소 링크

주요사항

페이지가 Load되거나, 값이 변하면 drawCanvas() 함수를 호출해서 preview이미지를 그리도록 하였습니다.

    // 값이 변경시 updateValue 함수 호출 하도록 설정
    canvasWidth.addEventListener("change", updateValue);
    canvasHeight.addEventListener("change", updateValue);
    canvasColor.addEventListener("change", updateValue);
    contents.addEventListener("change", updateValue);
    fontSize.addEventListener("change", updateValue);
    fontColor.addEventListener("change", updateValue);
    
    // 페이지가 로드시 실행
    window.onload = function () {
        drawCanvas();
    }

입력된 Text가 여러줄일 경우를 대비해서 한줄 한줄 그리도록 하였습니다.

  function fillTextLine(context, text, x, y, fontSize) {
          var lines = text.split("\n");
          var lineCount = lines.length;

          // 여려줄일 시, 시작(맨 첫줄) y좌표값을 조절 하는 작업
          y = y - ((lineCount - 1) * fontSize) / 2;

          for (var i = 0; i < lines.length; i++) {
              context.fillText(lines[i], x, y);
              y += fontSize + fontSize / 10;
          }
      }

결과물

먼가 부족한데요? 😧

다운로드 버튼이 없습니다.🤫 지금은 우클릭 해서 다운로드 하는 방법으로 해야 됩니다.
그 외에도 style 적용이라든지, 예외처리 같은 부분들도요.
이런 부분들을 공부해 나가면서 하나씩 구현하려 합니다.

참고

http://www.tcpschool.com/html-tags/intro - HTML Tag
https://www.w3schools.com/ - HTML, JavaScript
https://202psj.tistory.com/1210 - HTML5 canvas fillText 줄 바꿈 관련
https://opentutorials.org/course/3084/18891 - 생활코딩 github pages