03.24

Toy : Meme Maker 개발

Toy 프로젝트로 Meme Maker 서비스를 개발중이다.
대단한것은 아니고... "짤방"메이커 서비스다.

5시간 정도 만진 것 같다.
아직은 CSS를 적용하지않아 에디터 디자인이 엉망이다.

글자의 위치, 서체, 크기, 색상을 설정할 수 있다.
다운로드 버튼을 누르면 다운로드도 가능하다.

HTML canvas 태그를 이용하여 만든다.

• canvas 생성 코드
  : 캔버스를 그리고 그 안에 이미지를 넣어주었다.
  window.onload는 변경 예정이다.

<Canvas className="canvas" width="770px" height="480px">
          {
            (window.onload = function (e: any) {
              let content = document.querySelector(".canvas") as HTMLCanvasElement;
              let ctx: any = content.getContext("2d");
              let img = new Image();
              img.src = picture3;
              img.onload = function (e: any) {
                ctx.drawImage(img, 0, 0, 775, 480);
              };
            })
          }
        </Canvas>

• Text 삽입 코드
  : ctx.font는 보통 "50px 굴림체"
  이런식으로 설정하는데,
  서체와 폰트사이즈 변경을 위해 State에서 가져와 사용했다.

  function writeText(option: string) {
    let content = document.querySelector(".canvas") as HTMLCanvasElement;
    let ctx: any = content.getContext("2d");
    if (option === "write") {
      ctx.fillStyle = fontColor;
      ctx.font = `${fontSize} ${font}`;
      ctx.fillText(text, x, y);
    }
    if (option === "delete") {
      window.location.reload();
    }
  }

• Download 코드
  : a태그에 download 속성을 넣어주고, 클릭할 때 href에 다운로드 링크를 넣어준다

<a href="#" className="download" download onClick={downloadImg}>
  
function downloadImg() {
    let canvas: any = document.querySelector(".canvas");
    let el: any = document.querySelector(".download");
    let img = canvas.toDataURL("image/jpg");
    el.href = img;
  }

내일은, 반응형을 손보고 로직을 마무리해야겠다.
(+)타입을 any로 지정한것도 바꿔줘야지..