[Error] 갤러리에서 이미지 get 요청시 파일이 깨짐

[nala723]

블로그 개념 정리 - canvas의 그림데이터 서버로 보내는 과정

어떤 에러인가요?

• 꿈 그림 페이지에서 Canvas API를 이용하여 구현한 그림판으로 그림을 그린 후,
  해당 그림을 서버로 post 요청했다.
  이 후 mypage의 갤러리에서 저장한 그림들을 get 요청하고
  서버에서 받은 데이터들을 buffer로 base64인코딩한 다음 렌더링 코드를 짰다.
  but 해당 그림들이 제대로 표시되지 않았다.

에러 메시지

• 그림들이 제대로 표시되지 않았다

에러 핸들링 방법

1 갤러리 페이지

• console.log로 인코딩한 데이터들을 확인한 결과, 해당 문자열의 앞부분에 불필요한 문자열이 붙어서 렌더링되고 있었다.
  해당 갤러리나 서버에서의 코드는 문제 없어 보였고,
  꿈 그림페이지에서 그림을 post 할 때의 코드를 확인해야 할 것 같았다.

2. 꿈 그림 페이지

• canvas의 이미지 데이터를 인코딩 및 가공하는 과정이 여러단계이므로 단계별로 콘솔로그를 찍어서 그 값을 확인해보았다.

    const canvas: HTMLCanvasElement = canvasRef.current;
    const image = canvas.toDataURL('image/png') // 캔버스 이미지데이터를 base64로 인코딩

    // console.log('base64 인코딩 : ', image); 

    const blobBin = Buffer.from(image, 'base64').toString('binary'); // base64를 binary로 인코딩

  // console.log('binary 인코딩 : ', blobBin); 

		const array = [];
		for (let i = 0; i < blobBin.length; i += 1) {
			array.push(blobBin.charCodeAt(i));//인코드된 문자들을 0번째부터 끝까지 해독하여 유니코드 값을 array 에 저장한다. 
		}

    // console.log('array에 유니코드값 저장 :', array); 
		const u8arr = new Uint8Array(array); //8비트의 형식화 배열을 생성한다. 

  // console.log('8비트 배열 생성 :', u8arr); 

		const file = new Blob([u8arr], { type: "image/png" }); // Blob 객체 생성

 //  console.log('Blob 객체 생성 :', file);

		const formdata = new FormData(); // formData 생성
		formdata.append("picture", file); // formdata에 file data 추가

캔버스 이미지데이터를 base64로 인코딩

base64를 binary로 인코딩

array에 유니코드값 저장, 8비트 배열 생성, Blob 객체 생성

콘솔을 확인해본 결과
가장 첫번째 단계인 canvas 이미지데이터를 base64로 인코딩할 때,
','을 기준으로 앞의 문자열을 떼어내야 적절한 데이터를 얻어낼 수 있었다.

  const image = canvas.toDataURL('image/png').split(',')[1];

에러 핸들링을 위해 참고한 레퍼런스 링크

참고1
참고2