선생님 blob객체를이용해서 캔버스 이미지..

[정중식]

캔버스 이미지를 blob객체를 이용해서 multer로 로컬 uploads폴더에 전송은 성공했습니다 근데

저장된 폴더에 이런식으로 들어오던데 맞는건가요?
나중에 불러올떄는 예를들면  `uploads/${canvasImage}.png` 이런식으로 뒤에 .png를 하드코딩으로 붙여주면되는건가용?

코드는 이렇게 작성했습니다.

[codingapple]

문자로 저장해놨으면 <img src=""> 안에 그냥 넣으면 됩니다 
근데 용량늘어나는데 굳이 문자로 바꿔서 저장할 필요가 있을까요

[정중식]

선생님 답변감사합니다.
근데 "용량 늘어나는데 굳이 문자로 바꿔서 저장할 필요가있냐"는 말씀을 하셨는데..
제가 지금 코드로 구현한거는 문자로 저장해놓은 상태인거죠..?
그럼 문자로 저장한게아닌 이미지로 저장하려면 맨처음 이미지 1677..어쩌구 -blob 이렇게 저장되는형태가아니라
jpg나 png가 뒤에 붙은 상태로 저장되어야한다는걸까요?
blob랑 이미지에대한 이해도가 부족해서 답답한질문 죄송합니다..

[정중식]

선생님 캔버스를 이미지로 바로 바꾸는 코드를짜는게 너무 어려워서 프로젝트를 좀 수정했습니다.
카드를 꾸미고 캔버스 이미지를 사용자 컴퓨터에 저장시키고 카드 작성 페이지에서 카드를 올리는 식으로 하려구요 ..ㅠ

[codingapple]

넴 dataURL로 저장하면 이미지를 문자로 바꿔줍니다 
react konva에 dataURL말고 이미지로 바꿔주는 함수도 있는거같군요

[정중식]

선생님 답변감사합니다.

선생님이 말씀하신거를 찾아봤는데

toImage()맞을까요?

  /** 작성된 카드 보내기 */
  const handleSubmit = async (e) => {
    e.preventDefault();

    var image = stageRef.current.toImage({
      callback(img) {
        // do stuff with img
        console.log(img);
      },
    });
    console.log(image);

그냥 image를 콘솔찍었을땐 promise를반환하고, 콜백 img를 콘솔찍었을때는
사진처럼이렇게 또 길게 나타나는데요 혹시 제가 맞게 코딩한걸까요?

이대로 multer로 서버 업로드처리해봤는데 uploads폴더에 저장은안되네요..
혹시 여기서 더 처리해줘야할게있을까요?

[codingapple]

똑같군요 그럼 dataurl을 이미지로 변환해서 보내거나 그런 방법을 찾아봅시다 
안되면 그냥 문자로 저장합시다

[정중식]

답변 감사합니다!

[글쓴이]

글