[DAY64] TIL

canvas 에 그린 그림을 저장하여 formData로 전송하기

1. 문제
   canvas에 그린 그림을 저장 후 이미지의 형태로 서버에 보내고 싶은데,, 따로 버튼을 만들어서 함수를 실행시켜주지 않고 해내고싶었다.. 그렇게는 도저히 어려워보이긴 하지만..

2. 시도
   그리기 완료 버튼을 만들어서 따로 저장을 해 줌. toBlob을 활용하여 블롭으로 만들어줄 수 있는건 알겠는데 이걸 어떻게 활용해야할지 굉장히 고민했다. 그러다가 state를 사용하기로 함. 이때 저장하는 함수는 다음과 같다.

  const [picture, setPicture] = useState<Blob | null>(null);

  const savePictureHandler = () => {
    const canvas = canvasRef?.current;
    canvas?.toBlob(
      (blob) => {
        if (blob) {
          setPicture(blob);
        }
      },
      "image/jpeg",
      0.95
    );
  };

하지만 이렇게 하니까 검정색 이미지만 저장된다.. 그리고 또 다른 색깔로 그린 그림들은 제대로 저장이 됨.

3. 해결

  const savePictureHandler = (): void => {
    const canvas = canvasRef?.current;
    canvas?.toBlob(
      (blob) => {
        if (blob) {
          setPicture(blob);
        }
      },
      "image/png",
      0.95
    );
  };

formData 에 첨부하기

 const formData = new FormData();
      formData.append("image", picture);

4. 알게된 점
   canvas에 그린 그림은 png 파일로 저장해야 함. 그렇지 않으면 검정색이 배경에 깔려버림.
   또한 그리기 완료 버튼이 따로 있는것은 사용자로 하여금 불편함을 야기할 것 같아서, 글작성완료버튼이 뜨기 전에 계속하기 라는 버튼에 해당 이미지 저장 함수를 걸어줘서 완료시에 글작성 버튼으로 보여지게끔 처리하면 자연스러운 흐름으로 캔버스의 이미지를 저장할 수 있다.