캔버스 이미지 blob로 바꾸고 저장질문있습니다.

Question

캔버스 이미지 blob로 바꾸고 저장하기 질문있습니다. /** 작성된 카드 보내기 */ const handleSubmit = async (e) => { e.preventDefault(); if (window.confirm('카드 작성을 완료하시겠습니까?')) { const data = stageRef.current.toDataURL(); const blobBin = atob(data.split(',')[1]); let array = []; for (var i = 0; i < blobBin.length; i++) { array.push(blobBin.charCodeAt(i)); } const file = new Blob([new Uint8Array(array)], { type: 'image/jpg' }); // Blob 생성 const formData = new FormData(); // formData 생성 formData.append('file', file); // file data 추가 const config = { header: { 'content-type': 'multipart/form-data' }, }; await axios .post('/api/upload', formData, config) .then((response) => { console.log(response); // dispatch(changeCanvasImage(response.data.fileInfo.filename)); }) .catch((err) => console.log(err)); } }; 위와같이 코드를 짰습니다.서버쪽에서는 multer로 로컬 uploads폴더에 저장되고있구요.. 근데 uploads폴더에는 1677936167713-blob 이런식으로 확장자 명 없이 저장되는데 올바르게 저장되고있는걸까요?나중에 aws s3에 1677936167713-blob <= 이런식으로 저장하면 되는건가요?

데브폐인 · Answer

blob로 전달될때 file 객체의 name 이 blob로 전달됩니다.이럴땐, file객체의 type값(mime-type) 을 확인해서확장자를 추출하시면 됩니다.type은 image/jpge, image/png, image/gif 같은 형태로 전달되니,spilit 해서 뒷부분만 잘라서 쓰시면 될것 같네요. 프론트에서 이미지 편집한 데이타를 전송할때,urlencode 한 base64 형태로 서버에 전달해서, 서버에서 디코딩 처리후 바이너리로 저장하는 경우도 있습니다.blob로 안 보내도 되고, base64가 string 형태라서,,다른값과 동시에 전달하는 경우라면, 이방법도 괜찮습니다.

캔버스 이미지 blob로 바꾸고 저장질문있습니다.

1개의 답변

#blob 목록