팀 프로젝트 recycle classification 3일차

Model 부분을 완성한 뒤 사진촬영과 모델에 전달기능을 돕기로 했다.

사진촬영 및 모델에 전달하는 기능을 다른 팀원이 구현 중이었는데,

사진을 촬영한 후 전달하는 부분에 있어서 어려움을 겪고 있었다.

js파일은 다음과 같았고

function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      var data = canvas.toDataURL('image/png');

      $.ajax({
          type: "POST",
          url: "/fileupload",
          data: data,
          cache: false,
          contentType: false,
          processData: false,
          success: function (response) {
              alert(response["result"])
              // 아래처럼 하지 않아도, 백엔드(ml_app.py)에서 바로 판별 함수를 실행한 뒤에
              // render_template 을 해서 바로 결과 페이지로 넘어가도 됨
              window.location.href='/result'
          }
      });
      } else {
        clearphoto();
      }

  }

flask 서버부분은 다음과 같았다.

@app.route('/fileupload', methods=['POST'])
def file_upload():
    file = request.data
    print(file)

request.data를 받으면 base64형태의 이미지가 flask쪽으로 전달되었다.
처음엔 받은 이미지를 디코딩을 해야한다고 생각했다.
flask 강의 때 들었던 부분 중

import codecs

base64_data = codecs.encode(file.read(), 'base64')
image = base64_data.decode('utf-8')

를 활용하여 디코딩을 할려고 하였지만 쉽지 않았다.
구글링을 통해 OpenCV 를 이용한 디코딩 방법도 찾아보았지만 적용하는데 어려움을 겪었다.
결국, flask 서버에서 디코딩을 하는 방법이 아닌 js부분을 수정하여 해결하였다.

해결완료🌟
남은 프로젝트도 화이팅이다🔥🔥🔥